CSSで子要素に奥行きを与える方法/pespectiveプロパティの使い方

perspectiveはちょっとややこしくて、perspectiveとtransform:perspectiveのふたつがあります。ここでは「親要素に指定する」perspectiveプロパティについて解説しています。

perspectiveプロパティの使い方

こんな感じのdivがあったとします。

このdivをさらにdivで包み、親の要素に対してperspectiveプロパティを設定します。

ここでは値に200pxを指定してみましょう。
さらに、子要素に対してはtransform:rotateプロパティを指定する必要があります。ここではtransform:rotateY(80deg)と指定してみましょう。

するとこうなります。

.perspect200{
perspective:200px;
}
.box{
border:1px solid black; 
width:100px; 
height:100px;
transform:rotateY(80deg);
}

もしperspective:200pxを親要素に持たないtransform:rotateY(80deg)の箱だと、

こんな感じになります。平面上で横方向にグルッと回るようなイメージでしょうか。
この値は要素の端から端までの距離ではなく、要素の一番奥とユーザーの距離となります（後述）。

各値について

角度

角度は「裏」になった場合、要素も反転します。

回転方向

rotateYでは横方向に傾きますが、Xで縦方向に回転させることもできます。

距離

距離は単純に値が大きくなるほど距離が長くなるわけではなく、要素はそれ自体の長さを持っており、perspectiveが100だろうが1000だろうが要素のwidthが100なら100分の奥行きしか持ちえません。
要素の幅が100、perspectiveが100の場合、ユーザーから見た要素の一番奥の部分と、要素の横幅が一致します。つまり、パースペクティブが大きく（＝近く）描写されます。

これに対しperspectiveが1000あれば、ユーザーと要素の間には900pxのへだたりがあり、その奥で100pxの要素が傾きます。よって、パースペクティブは小さく（＝遠く）描写されます。

基準点

transform:originで回転する基準点を変更することができます。

CSSの便利な使い方・プロパティ逆引きリファレンス

HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

sunagitsune.com

2019.01.27