css3系列之transform 详解scale

阳光穿透心脏的1/2处 2022-12-27 12:53 148阅读 0赞

scale()

scaleX()

scaleY()

scaleZ()

scale3d()

[改变的不是元素的宽高，而是 X 和 Y 轴的刻度][X _ Y]

本章有个很冷门的知识点 → [scale 和 rotate 一起使用][scale _ rotate]

——————————————————————————————————————

**scaleX()**

**scaleY()**

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

![3aac9c6382618dab2791e87d2849d0f3.png][]

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

![0c5bf7d1239947066c9bdce3176f60b9.png][]

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

![257898bc75602912deb10df562885b2e.png][]

**scale()**

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

![c8856bba6fe6c6e1ed9b21fd88b4e88d.png][]

![69a416eda15dad03a4c9afe989a2d5d4.png][]

**scale3d()**

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

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

**探索：**

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

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

![7b682ad44e3607ed4945e1b768c36e35.gif][]

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

![f2030fd83950f0ac1537dfcf843db3eb.gif][]

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

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

![7aa12c9229e2626d93202c87131164a8.gif][]

转自：[https://www.cnblogs.com/yanggeng/p/11277199.html][https_www.cnblogs.com_yanggeng_p_11277199.html]

[X _ Y]: https://www.cnblogs.com/yanggeng/p/11277199.html#cccc
[scale _ rotate]: https://www.cnblogs.com/yanggeng/p/11277199.html#asd
[3aac9c6382618dab2791e87d2849d0f3.png]: /images/20221120/fc574871f1da41e28dce1bf369582362.png
[0c5bf7d1239947066c9bdce3176f60b9.png]: /images/20221120/8b062d2a5a864e23b5066ff40dd38456.png
[257898bc75602912deb10df562885b2e.png]: /images/20221120/45b8e114c9c6436e89275db7c0cda1a8.png
[c8856bba6fe6c6e1ed9b21fd88b4e88d.png]: /images/20221120/2474d71aa4a746609684b40115abaf93.png
[69a416eda15dad03a4c9afe989a2d5d4.png]: /images/20221120/5f30d33411e04395982f2d7dcb8c68e5.png
[rotateZ]: https://www.cnblogs.com/yanggeng/p/11275771.html#Z
[7b682ad44e3607ed4945e1b768c36e35.gif]: /images/20221120/72209806f2b249d79f1c9994cb2578f0.png
[f2030fd83950f0ac1537dfcf843db3eb.gif]: /images/20221120/f2c5bfe6d96f4fef88bd956710746e05.png
[7aa12c9229e2626d93202c87131164a8.gif]: /images/20221120/2462549e6dd642568135e0ff070d1f94.png
[https_www.cnblogs.com_yanggeng_p_11277199.html]: https://www.cnblogs.com/yanggeng/p/11277199.html