rotate3d()

rotate3d()

的rotate3d() CSS函数定义了在3D空间中围绕一个固定轴线的旋转元素，而不使其变形的变换。其结果是一个<transform-function>数据类型。

在三维空间中，旋转有三个自由度，共同描述一个旋转轴。旋转轴由x，y，z向量定义，并由原点（由transform-origin属性定义）传递。如果按照规定，矢量未被标准化（即，如果三个坐标的平方和不为1），则用户代理将在内部对其进行标准化。不可规范化的向量，如零向量0,0,0，将导致旋转被忽略，但不会影响整个CSS属性。

注意：与2D平面中的旋转不同，3D旋转的组成通常是不可交换的。换句话说，旋转的顺序影响结果。

语法

rotate3d()创建的旋转量由三个<number>和一个<angle>指定。<number>s为表示旋转轴的矢量的x轴，y轴和z坐标。<angle>表示旋转的角度; 如果是它为正，运动将是顺时针的; 如果是负值，则为逆时针。

rotate3d(x, y, z, a)

可能的值

x是表示旋转轴的矢量的描述的x坐标的<number>。

| Homogeneous coordinates on ℝℙ2 |

| Cartesian coordinates on ℝ3 | 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001 |

| Homogeneous coordinates on ℝℙ3 | ​ |

实例

沿着y轴旋转

HTML

<div>Normal</div>
<div class="rotated">Rotated</div>

CSS

body {   
  perspective: 800px;
 }  
 
 div {   
   width: 80px;   
   height: 80px;   
   background-color: skyblue;
 }
 
 .rotated {   
   transform:rotate3d(0,1,0, 60deg   
   background-color: pink;
 }

结果

在自定义轴上旋转

HTML

<div>Normal</div>
<div class="rotated">Rotated</div>

CSS

body {
  perspective: 800px;
}

div { 
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate3d(1, 2, -1, 192deg
  background-color: pink;
}

结果

另见

• transform

• <transform-function>