このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

rotateX()”関数CSS3で追加

記事Aug.3rd,2021
要素をX軸を回転軸として回転させるCSSの関数、“rotateX()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

rotateX()”関数

rotateX()”関数は要素をX軸を回転軸として回転させるための関数です。

<transform-function>”値として使用することができ、transform”プロパティで要素を回転させることができます。

引数は1個の<angle>”値で、回転する角度を表します。

rotateX(〚回転する角度〛)

値が正の数である場合はX軸の正の側から原点を見て時計回り、値が負の数である場合は反時計回りの回転を表します。回転する角度が0度の場合は単位を省略して“0”とすることができます。

回転軸はtransform-origin”プロパティで指定した原点を通ります。原点は既定では要素の中心です。

同様の回転はrotate3d()”関数でも表すことができます。

X軸を回転軸とする回転
rotate3d(1,0,0,〚回転する角度〛)
変形マトリクス

以下は“rotateX(a)”を表す変形マトリクスの成分です。

m11 m21 m31 m41
m12 m22 m32 m42
m13 m23 m33 m43
m14 m24 m34 m44
1 0 0 0
0 calc(1 - 2 * pow(sin(a / 2),2)) calc(-2 * sin(a / 2) * cos(a / 2)) 0
0 calc(2 * sin(a / 2) * cos(a / 2)) calc(1 - 2 * pow(sin(a / 2),2)) 0
0 0 0 1

使用例

.transform-1 { transform: rotateX(0);}
.transform-2 { transform: rotateX(30deg);}
.transform-3 { transform: rotateX(90deg);}
.transform-4 { transform: rotateX(180deg);}
.transform-5 { transform: rotateX(360deg);}
.transform-6 { transform: rotateX(-90deg);}
rotateX(0deg)
rotateX(30deg)
rotateX(90deg)
rotateX(180deg)
rotateX(360deg)
rotateX(-90deg)

仕様書

定義されている仕様書
Level 1 Level 2
勧告候補(CR) 作業草稿(WD)
rotateX()
定義なし

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク