transform的2D部分，嗯…就这个标题了。

上一次写了transition的内容，这次就写拼写很类似的另外一个属性transform好了……我英语差这件事就不要吐槽了，下面是正文，真的：

transition是过渡，transform是变换。

transform分为2D变换和3D变换，简直碉堡了，其实3D变换就是比2D变换多了1D，可以简单这么理解，具体是不是等下次说3D的时候再说，这次只说2D。

在2D转换里我们可以实现斜切(skew)，缩放(scale)，旋转(rotate)以及位移(translate)元素的效果（还有一个矩阵－matrix，放括号里的原因是因为几乎不用它…反正我几乎不用，因为太难…不过我还是准备为它单写一篇文章，嗯，就这么定了！）。

注意： Internet Explorer 10, Firefox, 和 Opera支持transform 属性。Chrome 和 Safari 要求前缀 -webkit- 版本。 Internet Explorer 9 要求前缀 -ms- 版本。

从简单的translate位移开始说，这个效果需要两个参数（x轴位移量与y轴位移量）比如下面这个例子

这个是用来做对比的

这个是translate

css里是这么写的：

 .box{
   width:200px;
   height: 150px;
   background-color:#bec3c7;
   margin: 20px 0;
 }
 .box div{
   width: 100px;
   height: 50px;
 }
 .contrast{
   background-color: #3598db;
 }
 .translate{
   background-color:#f1c40f;
   transform: translate(50px, 30px);
   -ms-transform: translate(50px, 30px); /* IE 9 */
   -webkit-transform: translate(50px, 30px); /* Safari and Chrome */
 }

html里是这么写的：

 <div class="box">
   <div class="contrast">这个是用来做对比的</div>
 </div>
 <div class="box">
   <div class="contrast translate">这个是translate</div>
 </div>

然后来说说这个rotate旋转，这个效果只需要一个参数，就是旋转多少度，来继续吃栗子：

这个是用来做对比的

这个是rotate

css里是这么写的：

 .box{
   width:200px;
   height: 150px;
   background-color:#bec3c7;
   margin: 20px 0;
 }
 .box div{
   width: 100px;
   height: 50px;
 }
 .contrast{
   background-color: #3598db;
 }
 .rotate{
   background-color:#e67f22;
   transform:rotate(45deg);
   -ms-transform:rotate(45deg); /* IE 9 */
   -webkit-transform:rotate(45deg); /* Safari and Chrome */
 }

html里是这么写的：

 <div class="box">
   <div class="contrast">这个是用来做对比的</div>
 </div>
 <div class="box">
   <div class="contrast translate">这个是translate</div>
 </div>
 <div class="box">
   <div class="contrast rotate">这个是rotate</div>
 </div>

再然后是scale缩放，这个效果又要两个参数了，分别是横向缩放比例和纵向缩放比例，栗子在这：

这个是用来做对比的

这个是scale

css里是这么写的：

 .box{
   width:200px;
   height: 150px;
   background-color:#bec3c7;
   margin: 20px 0;
 }
 .box div{
   width: 100px;
   height: 50px;
 }
 .contrast{
   background-color: #3598db;
 }
 .scale{
   background-color:#e84c3d;
   transform: scale(0.5,2);
   -ms-transform: scale(0.5,2); /* IE 9 */
   -webkit-transform: scale(0.5,2); /* Safari and Chrome */
 }

html里是这么写的：

 <div class="box">
   <div class="contrast">这个是用来做对比的</div>
 </div>
 <div class="box">
   <div class="contrast translate">这个是translate</div>
 </div>
 <div class="box">
   <div class="contrast rotate">这个是rotate</div>
 </div>
 <div class="box">
   <div class="contrast scale">这个是scale</div>
 </div>

这次的最后说一下这个skew斜切，也有叫斜拉、拉伸，不过我还是比较习惯ps中文版的叫法“斜切”，先不放栗子，先说这个效果的意思。

这个效果需要两个参数，分别对应横向斜切角度和纵向斜切角度，我这里先给元素一个参数，另外一个先不动，看下效果：

css里是这样的：

 .box{
   width:200px;
   height: 150px;
   background-color:#bec3c7;
   margin: 20px 0;
 }
 .box div{
   width: 100px;
   height: 50px;
 }
 .contrast{
   background-color: #3598db;
 }
 .skew-x{
   background-color:#9a59b5;
   transform:skew(30deg,0);
   -ms-transform:skew(30deg,0); /* IE 9 */
   -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
 }

html里是这样的：

 <div class="box">
   <div class="contrast">这个是用来做对比的</div>
 </div>
 <div class="box">
   <div class="contrast skew-x">这个是skew</div>
 </div>

出来效果是这样的：

这个是用来做对比的

这个是skew

变成了一个平行四边形（其实长方形也是平行四边形啊～），参数中给的是30度，出来的效果是竖着的两条边与横着的边的垂线（y轴）产生了一个夹角，度数是30度，给的参数值也是30度，产生的变化说成普通话就是y轴逆时针旋转了30度（参考系的y轴依然是不会变的，这个时候给"translate：0 10px;"依然是向下的，而不是向右下）；

如果这个时候把第二个参数也写上，就变成这样了：

这个是用来做对比的

这个是skew

css里是这样的：

 .box{
   width:200px;
   height: 150px;
   background-color:#bec3c7;
   margin: 20px 0;
 }
 .box div{
   width: 100px;
   height: 50px;
 }
 .contrast{
   background-color: #3598db;
 }
 .skew{
   background-color:#9a59b5;
   transform:skew(30deg,20deg);
   -ms-transform:skew(30deg,20deg); /* IE 9 */
   -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
 }

html里是这样的：

 <div class="box">
   <div class="contrast">这个是用来做对比的</div>
 </div>
 <div class="box">
   <div class="contrast skew">这个是skew</div>
 </div>

可以看到，这次的横着的两条边与x轴成夹角的度数是20度了，不过这次的旋转方向是顺时针的了…

通过上面的栗子可以看出，transform的效果是会让内部一起出现对应的变化，而不仅仅只是改变边框，并且子元素及时大到超过父元素的范围，依然不会影响到layout。

今天就到这，我去准备matrix矩阵的内容了…