CSS - rotate 属性

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

此属性便于界面使用，因为您无需记住变换函数的顺序即可在transform属性中指定。

可能的值

CSS 属性rotate可以具有以下值之一

角度值：指定一个<angle>值来旋转元素。等效于rotate() 2D 函数。
x、y 或 z 轴名称加上角度值：确定元素需要围绕其旋转的轴的名称（x、y 或 z 轴），以及确定旋转角度的角度值。等效于 3D 空间中的rotateX() / rotateY() / rotateZ()旋转函数。
向量加上角度值：指定三个<number>，表示一个向量，该向量是一条需要围绕其进行旋转的线，以及一个确定旋转角度的角度值。等效于 3D 空间中的rotate3d()旋转函数。
none：指定不应用任何旋转。

应用于

所有可变换的元素。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

语法

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

CSS rotate - 元素旋转

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

Open Compiler

<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>

打印页面