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>。
y是描述表示旋转轴向量的y坐标的<number>。
z是描述表示旋转轴向量的z坐标的<number>。
a是代表旋转的角度的<angle>。正角度表示顺时针旋转，负角度表示逆时针旋转。
Cartesian coordinates on ?2 | This transform applies to the 3D space and cannot be represented on the plane. |
|---|
| 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>
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
