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

sparks IT

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

Advertisements

perspectiveプロパティの使い方

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

奥行きのある箱

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

子要素を3D描写する
perspective:値;

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

要素を傾ける
transform:rotate(角度deg);

するとこうなります。

奥行きのある箱
.perspect200{
perspective:200px;
}
.box{
border:1px solid black; 
width:100px; 
height:100px;
transform:rotateY(80deg);
}

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

奥行きのある箱

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

各値について

角度

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

奥行きのある箱

回転方向

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

perspective:rotateX(40deg)
perspective:rotateX(80deg)
perspective:rotateX(120deg)

距離

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

width100px/perspective100px

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

width100px/perspective100px

基準点

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

奥行きのある箱
CSSの便利な使い方・プロパティ逆引きリファレンス
HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

コメント