rotate()

基线 广泛可用

此功能已得到很好的建立，并且可以在许多设备和浏览器版本中使用。它自以下浏览器版本开始可用： 2015 年 9 月.

rotate() CSS 函数 定义了一个变换，该变换绕二维平面上的固定点旋转元素，而不会使其变形。其结果是 <transform-function> 数据类型。

试一试

上面提到的元素围绕其旋转的固定点也称为**变换原点**。默认情况下，它位于元素的中心，但您可以使用 transform-origin 属性设置您自己的自定义变换原点。

语法

rotate() 创建的旋转量由 <angle> 指定。如果为正，则移动方向为顺时针方向；如果为负，则移动方向为逆时针方向。180°的旋转称为点反射。

css
rotate(a)

值

a

是表示旋转角度的 <angle>。旋转方向取决于书写方向。在从左到右的上下文中，正角度表示顺时针旋转，负角度表示逆时针旋转。在从右到左的上下文中，正角度表示逆时针旋转，负角度表示顺时针旋转。

笛卡尔坐标 在 ℝ^2 齐次坐标 在 ℝℙ^2 笛卡尔坐标在 ℝ^3 齐次坐标在 ℝℙ^3
( cos ( a ) - sin ( a ) sin ( a ) cos ( a ) ) \left( \begin{array}{cc} \cos(a) & -\sin(a) \\ \sin(a) & \cos(a) \end{array} \right) ( cos ( a ) - sin ( a ) 0 sin ( a ) cos ( a ) 0 0 0 1 ) \left( \begin{array}{ccc} \cos(a) & -\sin(a) & 0 \\ \sin(a) & \cos(a) & 0 \\ 0 & 0 & 1 \end{array} \right) ( cos ( a ) - sin ( a ) 0 sin ( a ) cos ( a ) 0 0 0 1 ) \left( \begin{array}{ccc} \cos(a) & -\sin(a) & 0 \\ \sin(a) & \cos(a) & 0 \\ 0 & 0 & 1 \end{array} \right) ( cos ( a ) - sin ( a ) 0 0 sin ( a ) cos ( a ) 0 0 0 0 1 0 0 0 0 1 ) \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

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

CSS

css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
  background-color: pink;
}

结果

将旋转与另一个变换结合

如果要对元素应用多个变换，请注意指定变换的顺序。例如，如果在平移之前进行旋转，则平移将沿新的旋转轴进行！

HTML

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

CSS

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 变换模块级别 1
# funcdef-transform-rotate

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅