rotateZ()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
rotateZ()
函数定义了一个转换,它可以让一个元素围绕横 Z 轴旋转,而不会对其进行变形。它的结果是一个<transform-function>
数据类型。
尝试一下
旋转轴围绕原点旋转,而这个原点通过transform-origin
属性来定义。
备注: rotateZ(a)
相当于 rotate(a)
or 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;
}
结果
规范
Specification |
---|
CSS Transforms Module Level 2 # funcdef-rotatez |
浏览器兼容性
BCD tables only load in the browser