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