rotateX 関数
関数 rotateX は、3次元空間におけるX軸を中心とした
回転を指定します。プロパティ transform と
組み合わせて使用します。プロパティの値には、任意の角度の単位
が使用できます。正の値は手前方向へ、負の値は奥方向へ回転させます。
回転は、プロパティ transform-origin
で指定された点を中心に行われます。
構文
cssセレクタ {
transform: rotateX(角度);
}
例
この例では、ブロックにマウスを乗せるとX軸を中心に
180度回転します。回転を滑らかにするために、
プロパティ transition を追加しています:
html<div id="elem">lorem ipsum</div>css#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotateX(180deg);
}
Результат:
例
プロパティ
transform-origin
を使用して回転軸を変更します:
html<div id="elem">lorem ipsum</div>css#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateX(180deg);
}
Результат:
例
負の角度を設定します:
html<div id="elem">lorem ipsum</div>css#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateX(-180deg);
}
Результат: