perspectiveはちょっとややこしくて、perspectiveとtransform:perspectiveのふたつがあります。ここでは「親要素に指定する」perspectiveプロパティについて解説しています。
perspectiveプロパティの使い方
こんな感じのdivがあったとします。
このdivをさらにdivで包み、親の要素に対してperspectiveプロパティを設定します。
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が100だろうが1000だろうが要素のwidthが100なら100分の奥行きしか持ちえません。
要素の幅が100、perspectiveが100の場合、ユーザーから見た要素の一番奥の部分と、要素の横幅が一致します。つまり、パースペクティブが大きく（＝近く）描写されます。
これに対しperspectiveが1000あれば、ユーザーと要素の間には900pxのへだたりがあり、その奥で100pxの要素が傾きます。よって、パースペクティブは小さく（＝遠く）描写されます。
基準点
transform:originで回転する基準点を変更することができます。
コメント