针对transform中的几种值的先后顺序

一般的，对于css一些变量的属性值是没有顺序的，但是如今碰到了transform，对他设置一些值的时候就需要注意一下了，这顺序可不是随便定义的，如果控制不好，结果预期很可能让你大吃一惊，以下是我在学习的时候遇到的一些典型例子，在此分享给大家：

• 1、 translate和scale:
  HTML代码：

    <div class="wrapper">
        <div></div>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

CSS代码：

    div{
        width:100px;
        height: 100px;
        background: tomato;
    }
    .wrapper{
        width:500px;
        height: 400px;
        border:1px solid #000;
        margin:20px auto 0;
        background: none;
    }
    .div1{
        transform: translateX(400px);
    }
    .div2{
        transform: translateX(400px) scale(.5);
    }
    .div3{
        transform: scale(.5) translateX(400px) ;
    }

代码执行结果:

如图，默认的位移和形变的基点是中心，所以我们按照盒子的中心来做位移的衡量基点。第一个盒子为初始位置，第二个第三个都到了我们想要的位置（位移为400px），但是第四个盒子就出现了问题，位移为200px。

按照常理，不管scale和translate的顺序如何，都应该达到我们期望的位置，但是如今我们发现如果先位移，后缩放，则可以达到我们期望的位置，但是当顺序反过来，即先缩放，后位移的话，则会将位移的步长同时缩小相应的倍数（这里我们缩放到1/2，所以相应的位移从原来的400px缩放到200px）。

• 2、 translate和rotate:

  HTML代码：

    <div class="wrapper">
        <div></div>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

CSS代码：

    div{
        width:100px;
        height: 100px;
        background: tomato;
        transition: 1s all ease;
    }
    .wrapper{
        width:500px;
        height: 600px;
        border:1px solid #000;
        margin:20px auto 0;
        background: none;
    }
    .div1{
        transform: translateX200px);
    }
    .div2{
        transform: translateX(200px) rotate(45deg);
    }
    .div3{
        transform: rotate(45deg) translateX(200px) ;
        }

代码执行结果:

    如图，第二个第三个盒子同样达到了我们的预期，都向右移动了200px;但是第四个盒子又出现了问题，我们给的水平位移，但是在竖直方向也有了位移，不仅如此，向右移动的距离也没有200px，WFT?
    其实，当我们先旋转的时候，对于盒子的坐标系也旋转了，如图

所以，当我们在旋转后再进行位移的时候，其实是按照旋转后的坐标系位移，在我们视觉中就产生了向右位移了一部分，向下移动了一部分。

总而言之，在transform中，当我们同时有位移和其他属性的时候，记得要将位移放到最前，先位移到我们期望的位置，然后再进行其他的形变。