rotate

CSS 中的 rotate 属性围绕一个或多个轴旋转元素。 可以将其想象成在元素中插入一根或多根针，然后以度、梯度、弧度和转数为单位，以顺时针和逆时针方向围绕这些点旋转元素。

.element {
  rotate: 45deg;
}

虽然 CSS 已经可以使用 transform 属性中的 rotate() 函数以另一种方式旋转元素，例如

.element {
  transform: rotate(45deg);
}

…但 CSS 的 rotate 属性完全独立于 transform 属性，并且还可以旋转 Z 轴，这是 transform: rotate() 目前无法实现的。

语法

rotate: none | <angle> | [ x | y | z | <number>{3} ] && <angle>;

角度值以度、梯度、弧度或转数表示。

/* Keyword values */
rotate: none;

/* Angle values */
rotate: 45deg;
rotate: 0.35turn;
rotate: 1.27rad;
rotate: -50grad;

/* x, y, or z-axis name plus angle */
rotate: x 45deg;
rotate: y 0.35turn;
rotate: z 1.27rad;

/* Vector plus angle values */
rotate: 1 0.5 1 45deg;

/* Global values */
rotate: inherit;
rotate: initial;
rotate: revert;
rotate: unset;

• 初始值：none
• 应用于：可转换元素
• 继承：否
• 百分比：n/a
• 计算值：按指定值
• 动画类型：转换
• 创建堆叠上下文：是

值

• none: 默认值。 不对元素应用任何旋转。
• <angle>: <angle> 值用于指定围绕 Z 轴旋转元素的数值（以 deg、grad、rad 或 turn 单位表示）。 此值与我们在 transform 属性中使用的 rotate() 函数完全相同。
• 轴名称与 <angle> 值：这将标识要旋转的轴（X、Y 或 Z），以及围绕该轴旋转元素的数值。
• 向量加角度值：三个数字代表以原点为中心的向量，它定义了要围绕其旋转元素的直线，以及用于指定元素旋转角度的 <angle>。 等效于 rotate3d()（3D 旋转）函数。

单位

大多数情况下，您可能发现自己使用度单位（例如 45deg）作为 rotate 属性值。 但正如我们所见，属性接受四种类型的单位。 它们不像像素、em、rem 和百分比那样常见，因此让我们来分解它们，以了解它们是什么以及它们如何工作。

• deg: 一度是圆周的 1/360。
• grad: 一梯度是圆周的 1/400。
• rad: 弧度是圆的直径绕形状弧的长度。 一弧度等于 180deg，即圆周的一半。 一个圆周等于 2π 弧度，即等于 6.2832rad 或 360deg。
• turn: 一转是整个圆周。 因此，圆周的一半等于 .5turn 或 180deg。

rotate 属性接受所有这些单位，因为它们是表达相同概念的不同方式：围绕圆周的角度。 并且它们受到所有主要浏览器的 同等支持。

过渡和动画

rotate 属性支持 CSS 过渡和动画。 这意味着我们可以例如在悬停时从一个角度过渡到另一个角度

.element {
  rotate: 5deg;
}

.element:hover {
  rotate: 45deg;
  transition: rotate 1s;
}

在使用 @keyframes 进行 CSS 动画时，情况也是如此。 我们可以在定义动画时使用 rotate，就像我们对其他属性一样

当我们将 rotate 与 transform 函数结合使用时，我们可以实现更有趣和复杂的过渡和动画，独立地旋转元素，而与转换无关。

如果您仔细查看浏览器支持，您可能需要考虑一个适用于其他浏览器的回退解决方案，直到 rotate 属性获得所有浏览器的完整支持。 transform 属性是独立转换属性（如 rotate）的可行回退替代方案。

例如，我们可以将 rotate 动画放到 @supports 块中。 这样，动画只有在浏览器支持 rotate 属性时才会运行。

/* Using transform by default */
@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

/* Use rotate instead, but only if it is supported */
@supports (rotate: 0deg) {
  @keyframes loader {
    0% {
      rotate: 0deg;
    }
    100% {
      rotate: 180deg;
    }
  }
}

说到这里…

浏览器支持

演示

更多信息

• CSS 转换模块级别 2 规范（编辑器草案）
• MDN 网页文档
• Caniuse

进一步阅读

相关