在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a <transform-function> data type.

The fixed point that the element rotates around — mentioned above — is also known as the transform origin . This defaults to the center of the element, but you can set your own custom transform origin using the transform-origin 特性。

句法

The amount of rotation created by rotate() is specified by an <angle> . If positive, the movement will be clockwise; if negative, it will be counter-clockwise. A rotation by 180° is called point reflection .

rotate(a)
					

值

a

是 <angle> representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.

Cartesian coordinates on ℝ 2	Homogeneous coordinates on ℝℙ 2	Cartesian coordinates on ℝ 3	Homogeneous coordinates on ℝℙ 3
$\left(\begin{array}{cc}cos(a)& -sin(a)\\ sin(a)& cos(a)\end{array}\right)$	$\left(\begin{array}{ccc}cos(a)& -sin(a)& 0\\ sin(a)& cos(a)& 0\\ 0& 0& 1\end{array}\right)$	$\left(\begin{array}{ccc}cos(a)& -sin(a)& 0\\ sin(a)& cos(a)& 0\\ 0& 0& 1\end{array}\right)$	$\left(\begin{array}{cccc}cos(a)& -sin(a)& 0& 0\\ sin(a)& cos(a)& 0& 0\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right)$
	[cos(a) sin(a) -sin(a) cos(a) 0 0]

范例

基本范例

HTML

<div>Normal</div>
<div class="rotated">Rotated</div>
					

CSS

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

结果

Combining rotation with another transformation

If you want apply multiple transformations to an element, be careful about the order in which you specify your transformations. For example, if you rotate before translating, the translation will be along the new axis of rotation!

HTML

<div>Normal</div>
<div class="rotate">Rotated</div>
<div class="rotate-translate">Rotated + Translated</div>
<div class="translate-rotate">Translated + Rotated</div>
					

CSS

div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}
.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}
.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}
.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}
					

结果

规范

规范	状态	注释
CSS Transforms Level 1 The definition of 'rotate()' in that specification.	工作草案	初始定义

浏览器兼容性

Please see the <transform-function> data type for compatibility info.

另请参阅

• transform
• <transform-function>
• rotate3d()

元数据

• 最后修改： 2020 年 11 月 3 日

相关话题

1. CSS
2. CSS 参考