元素应用多个转换

.wrapper {
        width: 200px;
        height: 200px;
        /* solid - 实线 */
        /* dashed - 虚线 */
        border: 1px dashed red;
        margin: 200px auto;
    }
.origin{
        width: 200px;
        height: 200px;
        border: 1px solid green;
        transform: rotate(30deg);
        transform: translate(20px,20px);
    }

按如上所示代码，我们所需要达到的效果是，先旋转30deg，然后在分别想X/Y轴的正向上偏移20px。
但最后的结果是只在X/Y轴的正向上偏移20px，没有旋转变换操作。
当我们再增加一个transform: scale(2);缩放操作时，结果也只是执行了缩放操作，旋转和偏移都没有；可以理解为：

单一元素中只有一个transform属性操作会实现，且永远都是最后一个。
如果想要在同一元素内使用多个转换效果的话，我们可以在同一转换中使用它们，并通过空格隔开；如下：
transform: scale(2) rotate(30deg) translate(20px,20px);

注意：多行变换一行指令的执行顺序是从右到左的；且顺序很重要，不同的执行顺序其结果也不经相同，如下所示
transform:scale(1,1.5) rotate(90deg);

DCF425568A8BF003FE4334B42A8EC583.jpg
transform:rotate(90deg) scale(1,1.5);
B46D98BAA5C84DC8CB94EC51D54AF96D.jpg