标签：
上一次写了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轴位移量）比如下面这个例子
css里是这么写的：
1 .box{ 2 width:200px; 3 height: 150px; 4 background-color:#bec3c7; 5 margin: 20px 0; 6 } 7 .box div{ 8 width: 100px; 9 height: 50px; 10 } 11 .contrast{ 12 background-color: #3598db; 13 } 14 .translate{ 15 background-color:#f1c40f; 16 transform: translate(50px, 30px); 17 -ms-transform: translate(50px, 30px); /* IE 9 */ 18 -webkit-transform: translate(50px, 30px); /* Safari and Chrome */ 19 }
html里是这么写的：
1 <div class="box"> 2 <div class="contrast">这个是用来做对比的</div> 3 </div> 4 <div class="box"> 5 <div class="contrast translate">这个是translate</div> 6 </div>
然后来说说这个rotate旋转，这个效果只需要一个参数，就是旋转多少度，来继续吃栗子：
css里是这么写的：
1 .box{ 2 width:200px; 3 height: 150px; 4 background-color:#bec3c7; 5 margin: 20px 0; 6 } 7 .box div{ 8 width: 100px; 9 height: 50px; 10 } 11 .contrast{ 12 background-color: #3598db; 13 } 14 .rotate{ 15 background-color:#e67f22; 16 transform:rotate(45deg); 17 -ms-transform:rotate(45deg); /* IE 9 */ 18 -webkit-transform:rotate(45deg); /* Safari and Chrome */ 19 }
html里是这么写的：
1 <div class="box"> 2 <div class="contrast">这个是用来做对比的</div> 3 </div> 4 <div class="box"> 5 <div class="contrast translate">这个是translate</div> 6 </div> 7 <div class="box"> 8 <div class="contrast rotate">这个是rotate</div> 9 </div>
再然后是scale缩放，这个效果又要两个参数了，分别是横向缩放比例和纵向缩放比例，栗子在这：
css里是这么写的：
1 .box{ 2 width:200px; 3 height: 150px; 4 background-color:#bec3c7; 5 margin: 20px 0; 6 } 7 .box div{ 8 width: 100px; 9 height: 50px; 10 } 11 .contrast{ 12 background-color: #3598db; 13 } 14 .scale{ 15 background-color:#e84c3d; 16 transform: scale(0.5,2); 17 -ms-transform: scale(0.5,2); /* IE 9 */ 18 -webkit-transform: scale(0.5,2); /* Safari and Chrome */ 19 }
html里是这么写的：
1 <div class="box"> 2 <div class="contrast">这个是用来做对比的</div> 3 </div> 4 <div class="box"> 5 <div class="contrast translate">这个是translate</div> 6 </div> 7 <div class="box"> 8 <div class="contrast rotate">这个是rotate</div> 9 </div> 10 <div class="box"> 11 <div class="contrast scale">这个是scale</div> 12 </div>
这次的最后说一下这个skew斜切，也有叫斜拉、拉伸，不过我还是比较习惯ps中文版的叫法“斜切”，先不放栗子，先说这个效果的意思。
这个效果需要两个参数，分别对应横向斜切角度和纵向斜切角度，我这里先给元素一个参数，另外一个先不动，看下效果：
css里是这样的：
1 .box{ 2 width:200px; 3 height: 150px; 4 background-color:#bec3c7; 5 margin: 20px 0; 6 } 7 .box div{ 8 width: 100px; 9 height: 50px; 10 } 11 .contrast{ 12 background-color: #3598db; 13 } 14 .skew-x{ 15 background-color:#9a59b5; 16 transform:skew(30deg,0); 17 -ms-transform:skew(30deg,0); /* IE 9 */ 18 -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */ 19 }
html里是这样的：
1 <div class="box"> 2 <div class="contrast">这个是用来做对比的</div> 3 </div> 4 <div class="box"> 5 <div class="contrast skew-x">这个是skew</div> 6 </div>
出来效果是这样的：
变成了一个平行四边形（其实长方形也是平行四边形啊～），参数中给的是30度，出来的效果是竖着的两条边与横着的边的垂线（y轴）产生了一个夹角，度数是30度，给的参数值也是30度，产生的变化说成普通话就是y轴逆时针旋转了30度（参考系的y轴依然是不会变的，这个时候给"translate：0 10px;"依然是向下的，而不是向右下）；
如果这个时候把第二个参数也写上，就变成这样了：
css里是这样的：
1 .box{ 2 width:200px; 3 height: 150px; 4 background-color:#bec3c7; 5 margin: 20px 0; 6 } 7 .box div{ 8 width: 100px; 9 height: 50px; 10 } 11 .contrast{ 12 background-color: #3598db; 13 } 14 .skew{ 15 background-color:#9a59b5; 16 transform:skew(30deg,20deg); 17 -ms-transform:skew(30deg,20deg); /* IE 9 */ 18 -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */ 19 }
html里是这样的：
1 <div class="box"> 2 <div class="contrast">这个是用来做对比的</div> 3 </div> 4 <div class="box"> 5 <div class="contrast skew">这个是skew</div> 6 </div>
可以看到，这次的横着的两条边与x轴成夹角的度数是20度了，不过这次的旋转方向是顺时针的了…
通过上面的栗子可以看出，transform的效果是会让内部一起出现对应的变化，而不仅仅只是改变边框，并且子元素及时大到超过父元素的范围，依然不会影响到layout。
今天就到这，我去准备matrix矩阵的内容了…
标签：
原文地址：http://www.cnblogs.com/qwei/p/5059466.html
