rotate3d() (译)

原文

rotate3d() 方法是一个在三维空间上旋转元素的 3D 变换方法。

元素会被特定方法中传递的第四个参数 <angle>
旋转。前三个参数确定了旋转的方向并且它们会构成一个用来旋转的方向矢量[x, y, z].

一个正角度值将会以相关方向为轴进行顺时针的旋转，同时一个负角度值将会在对应轴上进行逆时针旋转。

顺时针方向取决于从向量终点（箭头所在的地方即是）到起点的方向。下图则是表示沿着三个轴的正角度（顺时针）：

沿着三个轴的正角度。注意如果你站在每个向量的终点并且向起点望去，顺时针方向就是图中所示的方向。

rotate3d() 方法的前三个参数将决定那几个方向上的矢量将会产生旋转， 并且角度将会决定方向：沿着矢量顺时针或者逆时针。

例如：

transform: rotate3d(1, 1, 2, 45deg);

transform: rotate3d(2, 1, 3, 33deg);

transform: rotate3d(1, 0, 0, 45deg); /* element is rotated clockwise along the x-axis by 45deg */

transform: rotate3d(0, 1, 0, 45deg); /* element is rotated clockwise along the y-axis by 45deg */

transform: rotate3d(0, 0, 1, 45deg); /* element is rotated clockwise along the z-axis by 45deg */

transform: rotate3d(0, 0, 0, 50deg); /* NO ROTATION IS APPLIED */

一下图片展示了给图片应用了 rotate3d(1, 1, 1, 50deg) 样式的效果：

官方的语法是这样的：

transform: rotate3d( <number> , <number> , <number> , <angle> );

为了更好地理解变换函数，详情参考这里

浏览器支持

以下是对三维空间 CSS 变换支持的列表：

CSS3 3D 变换

在三维空间上对元素的变换使用的是 transform 这个属性。还包含了是用 perspective 属性来对元素在 z 轴空间上设置透视以及是用 backface-visibility 属性来反转元素在 3D 上的变换。

W3C 草案

以下版本的浏览器提供了支持

桌面

移动端 / 平板

需要相应的前缀进行标记

引自 caniuse.com