CSS3转换属性—transform之translate、rotate、scale函数详解

目录

🔽 translate位移函数

🔹 translateX

🔹 translateY

🔹 translate()和translate3d()

🔽 rotate旋转函数

🔹 rotate()

🔹 rotateX()

🔹 rotate3D

🔽 scale缩放函数

🔹 scaleX() 和 scaleY()

🔹 scale()

🔹 scale3d()

---

🔽 translate位移函数

translate的作用很简单，就是平移，参考自己的位置来平移

　　transform:translate()

　　                translateX()

　　                translateY()

　　                translateZ()

　　                translate3d()

🔹 translateX

向X轴平移，v1为正数，往右平移，v1为负数，往左平移

🔹 translateY

向Y轴平移，v1为正数，往下平移，v1为负数，往上平移

🔹 translateZ

向Z轴平移，这个可能有点难理解，想像一个场景，你现在和电脑屏幕的距离，这就是Z轴的距离，电脑屏幕离你越近，那么translateZ() 里面的值 越大，  电脑屏幕离你越远， translateZ() 的值就越小。 所以说，Z 增加，那么这个电脑屏幕，离你就越近，

下面要用到旋转——rotate，关于rotate详情，请参看下面rotate知识点详解

首先Z 轴是朝向我们的，所以 看不出效果，但是，我们把它转个身，让Z轴 面对 右边，就可以了。

🔹 translate()和translate3d()

translate是同时设置translateX和translateY，所以里面可以填两个参数，第一个值X  第二个Y。

translate3d 是同时设置  translateX  ，translateY 和 translateZ 所以里面可以填三个参数。

只不过有点不同的是， translate如果第二个参数不填的话，默认是0， 不过translate3d的话，人家就不同意你不填了，你三个参数，必须都给我填。

🔽 rotate旋转函数

　    rotate(ndeg)    定义2D旋转

　　rotateX(xdeg)  元素围绕X轴进行旋转

　　rotateY(ydeg)  元素围绕Y轴进行旋转

　　rotateZ(zdeg)  元素围绕Z轴进行旋转

　　rotate3d((x,y,z,ndeg)   定义 3D 旋转

🔹 rotate()

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

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

● 关于transform-origin属性（transform）

https://www.cnblogs.com/05311113-zz/p/15586656.html

🔹 rotateX()

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

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

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

​

这样看起来，好像不是那么直观，毕竟是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

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

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

🔽 scale缩放函数

　     scale()      定义2D的缩放转换

　　 scaleX()    通过设置 X 轴的值来定义缩放转换

　　 scaleY()    通过设置 X 轴的值来定义缩放转换

　　 scaleZ()    通过设置 X 轴的值来定义缩放转换

        scale3d()   定义3D的缩放转换

🔹 scaleX() 和 scaleY()

缩放该元素，>1 放大， <1 缩小  默认值是 1；

看了上面的图，你可能会觉得，好像是100px  变成了200px   但是实际上，并不是！变的不是元素的宽高。

其实，他改变的不是元素的宽高，而是x 和 y 轴的刻度 ↓ 

🔹 scale()

这个是上面两个的合体，也就是参数第一个是x，第二个是y

🔹 scale3d()

第一个参数是 x  第二个参数是y  第三个参数是z ，也就是scalex scaley scalez 的结合体。

scalez吧，这个值原本就是3D的，所以可能会有点难理解， 像上面这个图， 本来就是2D 的图，你再怎么拉伸他的Z 轴，也是看不出效果的。前提是你的图，是3D的才能拉伸，2D的是拉伸不了的。  如果有不知道Z轴在哪里的朋友，请参看上面关于rotateZ的说明

探索：

首先，我们来思考一个问题，使用rotate进行旋转，那么X和Y轴是会跟着旋转而变化的，那么这个时候加上 scaleX 和 Y，那么旋转的过程中，会不会带上scale 的效果？

先来观察一下， 先rotate  再 scale 的效果：

看完上面的图，是不是觉得，旋转的时候，会带着scale的效果一起旋转。 但是！如果把他俩位置换了，那结果是截然不同的，先scale 再 rotate

对比两张图，你就会发现，第一张的效果，确实是带上了scale的效果一起旋转的，怎么 换了个位置，就不一样呢？

其实呢，先rotate，再scale(先旋转，后缩放) 是会把效果带上旋转的，但是 ，先scale 再 rotate(先缩放，后旋转) 是不会把缩放的效果带上旋转的，缩放的效果，会留在原地，等你经过的时候，就会生效。看下面的图解，缩放的比例，会留在原地，经过的时候，就会恢复比例。

​