CSS3复习 当scale和rotate一起使用

两个属性简介

rotate: 旋转元素 实际上旋转的是元素的坐标轴

scale: 伸缩元素 伸缩的是元素变化的坐标轴刻度 (证明过程和这篇文章的关系不大 所以放在最后面)

现象

.test .rotate-first {
    transform-origin: 0 0;
    transform: rotate(60deg) scale(5, 10);
}
.test .scale-first {
    transform-origin: 0 0;
    transform: scale(5, 10) rotate(60deg);
}

[下面这两张图片是之前看到一位大佬做的觉得方便理解就保存了下来 现在找不到当时的文章了..侵删!!]

当我们先rotate，再scale 会明显看到轴跟着rotate的角度变化

但是如果先scale 再rotate 看起来旋转空间好像就变化了

造成这种情况的根本原因

实际上，使用scale之后对坐标轴的影响(坐标的大小,轴的方向等)会一直保留 。也就是说所有伸缩过的方向对这个方向的影响会一直被保留， 所以先scale和后scale的情况会不一样。

造成这种情况的视觉上的原因

虽然是知道这么一个道理， 但是我其实还是有点想不通：为什么方向被伸缩过之后就会造成这样效果呢？（我又钻牛角尖了，于是我就做了下面的测试，做到最后发现好像跟前端没啥关系..但是毕竟花了这么多时间，还是写一写，纪念我流逝的时间..）

我们先不看x轴和y轴，我们直接看由他们两个共同决定的轴，为了方便称呼， 我们将矩形右下角和起点连接而成的轴称为a轴。如下:

如果先rotate，那么x轴每变化1度，a轴变化1度，就是360度平面中的1度。 也就是说a轴会按照下面的方式进行360°旋转。

在这样的情况下再进行scale，也就相当于把a轴拉长了一点而已。因此a轴旋转的时候看起来就像是在一个垂直于我们视线的平面上旋转。

但是如果先scale就不一样了，这里把x轴放大两倍，y轴不变，然后旋转1度(假装是1度)：

我们可以看到图片旋转的时候，a轴旋转的角度明显比x轴明显要小。也就是就没有旋转够1度 可以想象成a轴是被x轴和y轴推动着旋转的。下图红色是假如a轴旋转1度会变成的样子：

对比一下就能发现真正旋转的弧度(黄色的)看起来会比旋转1度的时候(红色的)要扁， 所以最后变成一个椭圆形，而且好像是垂直于另一个平面旋转。如图所示：

我们的z轴就是圆圈的切点和起点的连线(下面是一个动图 如果他不动 就等一下吧..)

由于a轴看起来会变短 x轴和y轴的长度当然也会跟着改变啦 就是因为有x轴y轴才能有a轴嘛 于是乎就形成了我们看到的现象~

scale伸缩的是元素变化的坐标轴刻度的证明

有两个大小相等的元素A、B 只对元素B使用scale进行伸缩 然后对元素A、B元素使用translatex平移相同的像素 这时候平移的距离不一样

平移之前:

平移之后:

一个题外话： transform后面可以跟多个scale， 而且每个scale变化的比例是在上一次变化的比例的基础上变化的