CSS 属性

CSS rotate 属性在指定元素的旋转变换时非常有用，独立于transform 属性。

此属性方便界面使用，因为您无需记住属性转换中特定的顺序转换函数。

属性值

CSS 属性旋转可以具有以下值之一:

  • 角度值:指定一个 <angle> 值来旋转元素。相当于 rotate() 2D 函数。

  • x、y 或 z 轴名称加角度值:确定需要旋转元素的轴的名称（x、y 或 z 轴），以及确定旋转角度的角度值。相当于 rotateX() / rotateY() / rotateZ() 3D 空间中的旋转函数。

  • 向量加法角度值:指定三个表示矢量的<number>，该矢量是需要发生旋转的一条线，以及确定的角度值旋转角度。相当于 3D 空间中的 rotate3d() 旋转函数。

  • none:指定不应用旋转。

适用范围

所有可变形元素。

语法

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

CSS rotate - 元素旋转

以下示例演示了旋转 CSS 属性的使用，以及各种传递值的方式:

<html>
<head>
<style>
   .box {
      display: inline-block;
      margin: 0.7em;
      min-width: 5.5em;
      line-height: 6.5em;
      text-align: center;
      transition: 2s ease-in-out;
      border: 2px solid black;
      background-color: lightgreen;
   }

   #rotate-box:hover {
      rotate: 60deg;
   }

   #rotate-x-box:hover {
      rotate: x 180deg;
   }

   #rotate-vector:hover {
      rotate: 0.8 1 0.5 360deg;
   }
</style>
</head>
<body>
   <h1>CSS Rotation 属性 鼠标放上去看效果</h1>
   <div class="box" id="rotate-box">rotate</div>
   <div class="box" id="rotate-x-box">rotate X</div>
   <div class="box" id="rotate-vector">vector with angle</div>
</body>
</html>