View in EnglishAlways switch to English

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>  <img          src="/shared-assets/images/examples/firefox-logo.svg"    width="200" /></section>

旋转轴围绕原点旋转，而这个原点通过transform-origin 属性来定义。

备注：rotateZ(a) 相当于rotate(a) orrotate3d(0, 0, 1, a)。

备注：与二维平面上的旋转不同，三维旋转的组合通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。

rotateZ() 引起的旋转量由<angle>指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。

css

rotateZ(a)

笛卡儿坐标 ℝ²	齐次坐标 ℝℙ²	笛卡儿坐标 ℝ³	齐次坐标 ℝℙ³
This transformation applies to the 3D space and can't be represented on the plane.		$(\begin{matrix} cos(a) & -sin(a) & 0 \\ sin(a) & cos(a) & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} cos(a) & -sin(a) & 0 & 0 \\ sin(a) & cos(a) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$

html

<div>Normal</div><div>Rotated</div>

css

div {  width: 80px;  height: 80px;  background-color: skyblue;}.rotated {  transform: rotateZ(45deg);  background-color: pink;}

Specification
CSS Transforms Module Level 2 # funcdef-rotatez

This page was last modified on⁨2025年11月10日⁩ byMDN contributors.