書式
transform: rotateZ(回転角度)
説明
Z軸方向に回転させるにはtransformにrotateZ()を指定します。これは2Dでの回転のrotate()を使ったのと同じになります。rotate()と同じように45degとすると45度回転します。3D効果を適用させるにはperspectiveを使ってパースを指定しておく必要があります。
また、サンプルのように半角空白で区切って回転方向を複数記述することもできます。
ブラウザによってはベンダープレフィックスを指定しないと動作しません。
#content {
width: 300px;
perspective : 300;
-webkit-perspective : 300;
}
#content p {
border:1px solid red;
background-color: yellow;
transform: rotateZ(40deg) rotateY(60deg);
-webkit-transform: rotateZ(40deg) rotateY(60deg);
}
目次に戻る