CSS 数据类型

CSS中的rotate3d()函数用于使元素绕三维表面上的固定轴旋转，而不造成任何变形。结果是 transform() 数据类型。

在三维空间 (3D) 中存在三个旋转自由度，统称为单旋转轴。该旋转轴由 [x, y, z] 向量定义并经过原点。

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

属性值

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

  • x: A数字，表示表示旋转轴的向量的 x 坐标。可以是正数或负数。

  • y:一个数字，表示表示旋转轴的向量的 y 坐标。可以是正数或负数。

  • z:一个数字，表示表示旋转轴的向量的 z 坐标。可以是正数或负数。

  • a:角度，表示旋转角度。正角度沿顺时针方向旋转元素；

语法

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

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

CSSrotate3d(): 正值和负值

以下是使用各种值作为参数的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>

CSSrotate3d (): 单独在所有轴上旋转

以下是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>