此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
rotateZ()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
rotateZ() 函数定义了一个转换,它可以让一个元素围绕横 Z 轴旋转,而不会对其进行变形。它的结果是一个<transform-function>数据类型。
尝试一下
transform: rotateZ(0);
transform: rotateZ(90deg);
transform: rotateZ(-0.25turn);
transform: rotateZ(3.142rad);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
旋转轴围绕原点旋转,而这个原点通过transform-origin 属性来定义。
备注:
rotateZ(a) 相当于 rotate(a) or rotate3d(0, 0, 1, a)。
备注: 与二维平面上的旋转不同,三维旋转的组合通常是不可交换的。换句话说,三维旋转的应用顺序,将会影响最终结果。
语法
rotateZ() 引起的旋转量由<angle>指定。如果为正,则顺时针方向移动;如果为负,则逆时针方向移动。
css
rotateZ(a)
参数值
| 笛卡儿坐标 R2 | 齐次坐标 RP2 | 笛卡儿坐标 R3 | 齐次坐标 RP3 |
|---|---|---|---|
| This transformation applies to the 3D space and can't be represented on the plane. | |||
示例
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 |
浏览器兼容性
Loading...