X軸方向に回転させる(3D)

書式

transform: rotateX(回転角度)

説明

X軸方向に回転させるにはtransformにrotateX()を指定します。45degとすると45度回転します。3D効果を適用させるにはperspectiveを使ってパースを指定しておく必要があります。
ブラウザによってはベンダープレフィックスを指定しないと動作しません。

サンプル サンプルを実行　サンプルをダウンロード

#content {
width: 300px;
perspective : 300;
-webkit-perspective : 300;
}
#content p {
border:1px solid red;
background-color: yellow;
transform: rotateX(40deg);
-webkit-transform: rotateX(40deg);
}
目次に戻る