css3在原来的基础上增加了变形和动画相关的属性，动画三兄弟：transform、transition和animation，通过使用这三个属性可以达到很炫酷的效果。需要注意的是这三个属性都是css3新增的属性，各大浏览器支持方面还不是特别好，使用时要特别注意浏览器的兼容性，本文重点介绍Transform的使用方法，具体内容如下
浏览器支持情况：
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。
2D transform变换方法
•translate(x, y)方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。x, y的值可以取正负，分别表示表示向不同的方向偏移。
•rotate(angle)方法， 表示旋转angle角度。angle为正时，按顺时针角度旋转，为负值时，元素逆时针旋转。
•scale(x, y)方法，表示元素在x轴和y轴上的缩放比例，参数大于1时，元素放大，小于1时，元素缩小。
•skew(x-angle,y-angle)方法，用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg
•matrix(n,n,n,n,n,n)方法， 以一个含六值的变换矩阵的形式指定一个2D变换，此属性值使用涉及到数学中的矩阵，感兴趣的读者可以深入了解一下，这里就不做详细介绍了。
下面是上面方法的演示：
-
-
transform 2D演示 -
- #container{
- width: 700px;
- height: 120px;
- border: 1px solid blue;
- margin: 20px auto;
- padding: 20px 20px;
- }
- #div1 ,#div2, #div3, #div4{
- height: 100px;
- width: 100px;
- border: 1px dashed red;
- display: inline-block;
- }
- #div1 div{
- height: 100px;
- width: 100px;
- background: #63F7ED;
- transform:translate(20px,10px);
- -ms-transform:translate(20px,10px);
- -moz-transform:translate(20px,10px);
- -webkit-transform:translate(20px,10px);
- -o-transform:translate(20px,10px);
- }
- #div2{margin-left: 50px;}
- #div2 div{
- height: 100px;
- width: 100px;
- background: #63F7ED;
- transform:rotate(45deg);
- -ms-transform:rotate(45deg);
- -moz-transform:rotate(45deg);
- -webkit-transform:rotate(45deg);
- -o-transform:rotate(45deg);
- }
- #div3{margin-left: 100px;}
- #div3 div{
- height: 100px;
- width: 100px;
- background: #63F7ED;
- transform:scale(2,0.5);
- -ms-transform:scale(2,0.5);
- -moz-transform:scale(2,0.5);
- -webkit-transform:scale(2,0.5);
- -o-transform:scale(2,0.5);
- }
- #div4{margin-left: 100px;}
- #div4 div{
- height: 100px;
- width: 100px;
- background: #63F7ED;
- transform:skew(30deg,-20deg);
- -ms-transform:skew(30deg,-20deg);
- -moz-transform:skew(30deg,-20deg);
- -webkit-transform:skew(30deg,-20deg);
- -o-transform:skew(30deg,-20deg);
- }
-
- translate