CSS 属性 rotate 可用于指定元素的旋转转换，与 transform 属性无关。
此属性便于接口使用，因为您无需记住在属性转换中要特定的顺序转换函数。
可能的值
CSS 属性 rotate 可以具有以下值之一：
- angle 值：指定要旋转元素的<angle>值。等效于 rotate（） 2D 函数。
- x, y, or z 轴名称加上 angle 值：确定需要旋转的元素周围的轴的名称（x、y 或 z 轴），以及确定旋转角度的角度值。相当于 3D 空间中的 rotateX（） / rotateY（） / rotateZ（） 旋转函数。
- 向量加angle值：指定三个<number>，表示一个向量，向量是一条围绕需要旋转的线，以及确定旋转角度的角度值。等效于 3D 空间中的 rotate3d（） 旋转函数。
- none：指定不应用旋转。
适用于
所有可转换的元素。
语法
rotate = none | <angle> | [x | y | z | <number>{3} ] && <angle>
CSS rotate - 元素旋转
以下示例演示了如何使用 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 Property</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>
