css3系列之transform 详解rotate

﹏ヽ暗。殇╰゛Y 2021-07-04 18:23 457阅读 0赞

rotate
    
    　　rotateX
    
    　　rotateY
    
    　　rotateZ
    
    　　rotate3d

## `rotate`： ##

旋转该元素，配合着`transform-origin`属性，`transform-origin` 是设置旋转点的。(没有设置`transform-origin` 属性也可以，只不过是根据该元素的中心点旋转，也就是`center center`)  
![在这里插入图片描述][20200816215555233.gif]  
加上 `transform-origin` 设置旋转点。`transform-origin` 是根据自己而定位的，所以 `0px 0px` 就是左上角那个点。  
![在这里插入图片描述][20200816215658632.gif]

## `rotateX`： ##

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

接下来，看看 所谓的`Z` 轴是什么  
![在这里插入图片描述][20200816222643740.gif]  
`rotateX` 的`X`呢，可以写成大写的，也可以写成小写的`x`， 没有影响，这个属性呢，你加上`rotateX` 之后，这个元素，就会以 `X` 轴 旋转，里面填的是角度。  
![在这里插入图片描述][20200816222806639.gif]  
这样看起来，好像不是那么直观，毕竟是2D 的图， 来给他加了3D 的效果看看，(由于设置了 `transform-origin：0 0`，所以并不会在元素的中间旋转，而是以 `0 0` 点的那条x 轴旋转)  
![在这里插入图片描述][20200816222911426.gif]  
上面两个图，第一个图是在 2d的 情况下观看的，第二个图是 3d的时候， 是不是 3d 看起来比较直观。

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

由于我设置的 `transform-origin：center center ；`定的点在中心，那么两条轴，是会成这样子的。  
![在这里插入图片描述][20200816223121576.gif]  
![在这里插入图片描述][20200816223239246.gif]

然后，看下，结果，是不是如我们所示？  
![在这里插入图片描述][20200816223347264.gif]  
最后，加上`rotateZ`  
![在这里插入图片描述][20200816223445860.gif]

## `rotate3D`： ##

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

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

[20200816215555233.gif]: /images/20210704/68ce54c4292b4087849ea560360c3542.png
[20200816215658632.gif]: /images/20210704/e416103b7d314b5b80ccf1e0745a032b.png
[20200816222554972.png]: /images/20210704/9143d644cae14839b83881228dc04e39.png
[20200816222643740.gif]: /images/20210704/26339719132540228a8f611cdde98e26.png
[20200816222806639.gif]: /images/20210704/762e555c9ebe42cf80976e6836496bb6.png
[20200816222911426.gif]: /images/20210704/fa305cc547b245ce894861d5fab98ee8.png
[20200816223121576.gif]: /images/20210704/a789f50fdadb465693a652b93d3284b3.png
[20200816223239246.gif]: /images/20210704/0091fb461ca94e53ae405692ee395df1.png
[20200816223347264.gif]: /images/20210704/c6d0363e01844ef7b86b5051914bdecb.png
[20200816223445860.gif]: /images/20210704/01a1e61bd50c49f1820ca9a6254ca5ed.png
[2020081622364896.png]: /images/20210704/fbd1a9f6a1d14fdfa33bf91f826b0bac.png
[20200816223801748.gif]: /images/20210704/de2ca73b3ccd474ebfa0c62e350f9def.png