CSS 函数 - rotate3d()

CSS 中的 **rotate3d()** 函数用于围绕三维表面上的固定轴旋转元素，而不会导致任何变形。结果为 **transform()** 数据类型。

在三维空间（3D）中，旋转有三个自由度，它们组合起来被称为单个旋转轴。此旋转轴由 [x，y，z] 向量定义，并通过原点。

当向量未标准化时，即其三个坐标的平方和不为 1，则用户代理会在内部对其进行标准化。对于不可标准化的向量（例如零向量，即 [0，0，0]），旋转将被忽略，而不会使整个 CSS 属性无效。

可能的值

**rotate3d()** 函数接受四个值，即三个坐标值（x、y、z）和一个角度 (a)。

**x**：一个数字，表示表示旋转轴的向量的 x 坐标。可以是正数或负数。
**y**：一个数字，表示表示旋转轴的向量的 y 坐标。可以是正数或负数。
**z**：一个数字，表示表示旋转轴的向量的 z 坐标。可以是正数或负数。
**a**：一个角度，表示旋转的角度。正角度使元素顺时针旋转；而负角度使元素逆时针旋转。

语法

**rotate3d()** 函数由三个 **<number>** 和一个 **<angle>** 指定。向量的三个坐标 (x、y、z) 表示旋转轴，由 **<number>** 表示。**<angle>** 表示旋转角度，当为正时，元素顺时针旋转，当为负时，元素逆时针旋转。

transform: rotate3d(x, y, z, a);

CSS rotate3d() - 正值和负值

以下是用各种值作为参数的 rotate3d() 函数示例，包括正值和负值。

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin-bottom: 1em;
   }

   .rotate-all-positive {
      background-color: lightgreen;
      transform: rotate3d(2, 1, 1, 45deg);
   }

   .rotate-all-negative {
      background-color: tomato;
      transform: rotate3d(-2, -1, -1, 45deg);
   }

   .rotate-mixed {
      background-color: cyan;
      transform: rotate3d(1,-2, 1, -60deg);
   }
</style>
</head>
<body>
   <div>No function</div>
   <div class="rotate-all-positive">
      rotate3d(2,1,1,45deg)  
   </div>
   <div class="rotate-all-negative">
      rotate3d(-2,-1,-1,45deg)  
   </div>
   <div class="rotate-mixed">
      rotate3d(1,-2,-1,-60deg)
   </div>
</body>
</html>

CSS rotate3d() - 在所有轴上分别旋转

以下是用 rotate3d() 函数分别显示在各个轴 (x、y、z) 上旋转的示例。

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: peachpuff;
      margin-bottom: 1em;
   }

   .rotate-x-axis {
      background-color: lightgreen;
      transform: rotate3d(1, 0, 0, 45deg);
   }

   .rotate-y-axis {
      background-color: tomato;
      transform: rotate3d(0, 1, 0, 45deg);
   }

   .rotate-z-axis {
      background-color: lightblue;
      transform: rotate3d(0, 0, 1, 45deg);
   }
</style>
</head>
<body>
   <div>No function</div>
   <div class="rotate-x-axis">
      rotate3d(1,0,0,45deg)  
   </div>
   <div class="rotate-y-axis">
      rotate3d(0,1,0,45deg)  
   </div>
   <div class="rotate-z-axis">
      rotate3d(0,0,1,45deg)  
   </div>
</body>
</html>

打印页面