rotateX()
**rotateX()
** CSS 函数 定义了一种围绕 x 轴(水平)旋转元素而不使其变形的变换。其结果为 <transform-function>
数据类型。
试一试
旋转轴穿过一个原点,该原点由 transform-origin
CSS 属性定义。
注意:rotateX(a)
等效于 rotate3d(1, 0, 0, a)
。
注意:与二维平面中的旋转不同,三维旋转的组合通常不是可交换的。换句话说,应用旋转的顺序会影响结果。
语法
rotateX()
创建的旋转量由 <angle>
指定。如果为正,则运动将为顺时针方向;如果为负,则运动将为逆时针方向。
css
rotateX(a)
值
示例
HTML
html
<div>Normal</div>
<div class="rotated">Rotated</div>
CSS
css
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.rotated {
transform: rotateX(45deg);
background-color: pink;
}
结果
规范
规范 |
---|
CSS 变换模块级别 2 # funcdef-rotatex |
浏览器兼容性
BCD 表格仅在浏览器中加载