rotate3d(CSS rotate3d()实例讲解)

一、css rotate(90deg)是旋转了90度还是旋转到90度

是顺时针方向旋转90度，负数则是逆时针方向。

“旋转到90度”这样的说法是不成立的，因为一个物体（或者说元素）本身是不存在角度的，你不能说这个物体在旋转前就是0度吧，因为你是根据什么说它是0度的呢？横边还是竖边啊？既然不能确定，那“旋转到xx度”的说法也就是不存在的，只能说相对于当前的位置旋转了xx度，这样的话不管以哪个边来计算角度都一样了。

二、css3系列之transform 详解rotate

rotate

rotateX

rotateY

rotateZ

rotate3d

rotate：

旋转该元素，配合着transform-origin属性，transform-origin是设置旋转点的。(没有设置transform-origin属性也可以，只不过是根据该元素的中心点旋转，也就是center center)

加上 transform-origin设置旋转点。transform-origin是根据自己而定位的，所以 0px 0px就是左上角那个点。

rotateX：

讲这个之前呢，先普及一个知识，在transform里面，x y z轴，分别是什么样子的，他跟我们平常的 x和 y不太一样，因为，他是倒着的。 Z轴呢，在0那个位置，因为他是3D的，看下面的图，转个身就知道在那里了。

接下来，看看所谓的 Z轴是什么

rotateX的X呢，可以写成大写的，也可以写成小写的x，没有影响，这个属性呢，你加上rotateX之后，这个元素，就会以 X轴旋转，里面填的是角度。

这样看起来，好像不是那么直观，毕竟是2D的图，来给他加了3D的效果看看，(由于设置了 transform-origin：0 0，所以并不会在元素的中间旋转，而是以 0 0点的那条x轴旋转)

上面两个图，第一个图是在 2d的情况下观看的，第二个图是 3d的时候，是不是 3d看起来比较直观。

那么，接下来，加上Y一起使用，rotateX(45deg) rotateY(45deg)，这两个合在一起什么意思呢，这个元素，先按照 X轴，旋转45度，然后再按照Y轴，旋转45度，那么接下来的结果会是怎么样呢？

由于我设置的 transform-origin：center center；定的点在中心，那么两条轴，是会成这样子的。

然后，看下，结果，是不是如我们所示？

最后，加上rotateZ

rotate3D：

设置一条主轴，然后根据这条轴旋转

这个呢，可以设置4个参数，前三个是，x y z最后一个是角度deg但是，此 x y z，可不是上面那几个，不一样的。这三个值，设置的是矢量的方向，填什么无所谓，主要是比值很重要。举个例子 1，1，0，0deg那么就是 1：1：0= 100：100：0对吧，拿这个值来图解比较好。

三、CSS transform中的rotate的旋转中心怎么设置

-webkit-transform-origin:centerbottom;

transform-origin:centerbottom

transform-origin：[<percentage>|<length>| left| center①| right

] [<percentage>|<length>| top| center②| bottom

]?

默认值：50% 50%，效果等同于center

center

适用于：所有块级元素及某些内联元素

继承性：无

取值：

<percentage>：

用百分比指定坐标值。可以为负值。

<length>：

用长度值指定坐标值。可以为负值。

left：

指定原点的横坐标为left

center①：

指定原点的横坐标为center

right：

指定原点的横坐标为right

top：

指定原点的纵坐标为top

center②：

指定原点的纵坐标为center

bottom：

指定原点的纵坐标为bottom

说明：

设置或检索对象以某个原点进行转换。

该属性提供2个参数值。

如果提供两个，第一个用于横坐标，第二个用于纵坐标。

如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。

对应的脚本特性为transformOrigin。