针对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中，当我们同时有位移和其他属性的时候，记得要将位移放到最前，先位移到我们期望的位置，然后再进行其他的形变。