禁断の扉【CSSでtransformを使ってみた】
どうも！LSSです！！
今回はまた「ブログで使えるんだか使いどころがあるんだか微妙」なモノを晒しますｗ
コード
<style><!--
.waku{
width:280px;
height:320px;
}
#tobiraura{
position: absolute;
font-size: 18px;
padding: 0.6em;
background-color: #dddddd;
}
#tobira{
font-size: 25px;
padding:0.6em;
text-align:center;
background-color:brown;
border:10px ridge gray;
display:block;
transform:rotateY(0deg);
transform-origin:0% 30%;
transition:transform 5s;
}
#tbr:checked~#tobira{
transform:rotateY(-91deg);
}
--></style>
<div style="position: relative; perspective: 1600px;">
<div id="tobiraura" class="waku">
扉の下の文章を<br/>ここに書きます。
</div>
<input id="tbr" style="display: none;" type="checkbox" />
<label id="tobira" class="waku" for="tbr">
扉の表の文章を<br />ここに書きます。
</label></div>
↑これを、HTML編集画面にコピペすると扉になります。
文章部分は適当に書き換えてください^^
（改行したいところでは例のように<br />を入れると、そこで改行されます。）
解説
調整したい場合の参考程度のものです^^;
.waku{
width:280px;
height:320px;
}
この部分でサイズを決めています。
widthは幅、heightは高さを指定しており、ここの数値を書き換える事で扉とその下部分の大きさが変わります^^
#tobiraura{
position: absolute;
font-size: 18px;
padding: 0.6em;
background-color: #dddddd;
}
扉の下の部分のデザインを決めている部分です。
position: absolute;はそのままにしておいてください。
font-size: 18px;は文字の大きさ。中の文章に応じて調整してOK！
padding: 0.6em;は余白で、この場合「0.6文字分の余白」という設定です。変更可。
background-color: #dddddd;は背景色です。#ddddddは薄めのグレー。変更可。
#tobira{
font-size: 25px;
padding:0.6em;
text-align:center;
background-color:brown;
border:10px ridge gray;
扉のデザインを指定している部分です。
text-align:center;で文字を中央寄せしています。この一行を削ると普通に左寄せになります。
border:10px ridge gray;は扉のフチ部分になり、10ピクセル幅のgray（灰色）のridge（盛り上がり）を指定しています。
なお、ここのbackground-color:brown;の一行を削った場合、ガラス扉になりますｗ
display:block;
transform:rotateY(0deg);
transform-origin:0% 30%;
transition:transform 5s;
}
#tbr:checked~#tobira{
transform:rotateY(-91deg);
}
--></style>
このへんから、仕掛けに密接に関わってくる部分になります。
transform:rotateY(0deg);
今回の目玉、transform！（変形）
車が人型ロボになったりするやつ！（違）
rotateYは「Y軸を軸として回転」する事を意味しています。
回転する量は0deg（0°）
degは角度の単位で、「°」と同じモノなので、90degだと直角になります。
ここで設定しているのは「開く前の扉の回転度合い」で、0degで「普通」の状態にしています。
transform-origin:0% 30%;
回転の中心位置をこれで決めています。
ひとつめの0%は横位置。0%だと左端、100%だと右端になります。
※つまり100%にすると左開きの扉になります。
ふたつめの30%は縦位置。今回あまり関係なさそうな気もしますが、開いた時の扉の傾き具合に影響します。
transition:transform 5s;
transitionは「変化を時間をかけてアニメにする」指定です。
アニメにする対象の変化をtransform要素、変化にかける時間を5s（5秒）で指定しています。
#tbr:checked~#tobira{
transform:rotateY(-91deg);
}
扉が開いた時の状態を指定しています。
閉じた状態の時の指定に使ったtransformのrotateYを-91°に設定しています。
先にtransitionでtransform要素の変化をアニメ化するようにしているので、0→91°に5秒かけて徐々に変化するようになっています。
なお、この「-91deg」を例えば「91deg」にした場合、手前に開いていた扉が奥に開くようになります。
transform-originのところで「100%にすると左開きになります」と書きましたが、そうした場合はここの角度のプラスマイナスが逆転します。
<div style="position: relative; perspective: 1600px;">
<div id="tobiraura" class="waku">
扉の下の文章を<br/>ここに書きます。
</div>
<input id="tbr" style="display: none;" type="checkbox" />
<label id="tobira" class="waku" for="tbr">
扉の表の文章を<br />ここに書きます。
</label></div>
扉の下と、扉の、実体部分になります。
赤文字部分だけの変更で使えると思います^^
青文字で書いた「1600」は奥行きの指定になり、この数字を小さくすると、視点が近くに寄ったようになり、数字を大きくすると、遠目に見たような感じになります。
…小さくしすぎると開いた扉が凄いサイズになってしまったり、大きくしすぎると変化が小さくて物足りなくなったりします^^;
CSSで「傾き」が扱えるので作ってみました
こんな風に「傾き」までも表現でき、さらにそれをtransitionで動的に動かせる、CSSって凄い！
…というところから、その機能を分かりやすく表現する例として作ってみました。
扉の下に画像とか仕込んでみても面白いかも知れませんね^^
