<angle>

尝试一下

transform: rotate(45deg);

transform: rotate(3.1416rad);

transform: rotate(-50grad);

transform: rotate(1.75turn);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This box can rotate to different angles.
  </div>
</section>

#example-element {
  background-color: #0118f3;
  padding: 0.75em;
  width: 180px;
  height: 120px;
  color: white;
}

语法

<angle> 数据类型由 <number> 后跟以下列出的单位之一组成。与所有尺寸一样，数字与单位之间没有空格。数字 0 后的单位是可选的。

此外，它前面可以加上一个 + 或 - 号。正数表示顺时针角度，而负数表示逆时针角度。对于给定单位的静态属性，任何角度都可以用各种等价值来表示。例如，90deg 等于 -270deg，1turn 等于 4turn。对于动态属性，比如应用 animation 或 transition 时，效果却会有所不同。

单位

deg

以度（角）为单位表示角度。一个完整的圆是 360deg。例：0deg、90deg、14.23deg。

grad

以百分度为单位表示角度。一个完整的圆是 400grad。例：0grad、100grad、38.8grad。

rad

以弧度为单位表示角度。一个完整的圆是 2π 弧度，约等于 6.2832rad，1rad 是 180/π 度。例：0rad、1.0708rad、6.2832rad。

turn

以圈数为单位表示角度。一个完整的圆是 1turn。例：0turn、0.25turn、1.2turn。

示例

设置顺时针的直角

90deg = 100grad = 0.25turn ≈ 1.5708rad

设置平角

180deg = 200grad = 0.5turn ≈ 3.1416rad

设置逆时针直角

-90deg = -100grad = -0.25turn ≈ -1.5708rad

设置零角

0 = 0deg = 0grad = 0turn = 0rad

规范

浏览器兼容性

参见

• CSS 数据类型
• <gradient> 类型
• CSS 旋转变换：rotate()、rotate3d()、rotateX()、rotateY() 和 rotateZ()
• CSS 变换
• 使用 CSS 变换
• 使用 CSS 渐变