CSS3动画-2D、3D转换

通过CSS3转换，我们能对元素进行移动，缩放，转动，拉长或拉伸。可以使用2D、3D来转换元素。

1、2D转换方法
（1）、translate()：移动效果
在css文件中加入如下代码：

    transform: translate(200px,100px);
    -webkit-transform: translate(200px,100px);//对chrome、safari进行浏览器支持
    -ms-transform:translate(200px,100px);//对IE进行浏览器支持
    -o-transform:translate(200px,100px);//对Opera进行浏览器支持
    -moz-transform:translate(200px,100px);//对Firefox进行浏览器支持

（2）、rotate()：旋转效果
在css文件中加入如下代码：

    transform: rotate(180deg);//旋转180度
    -webkit-transform: rotate(180deg);//对chrome、safari进行浏览器支持
    -ms-transform:rotate(180deg);//对IE进行浏览器支持
    -o-transform:rotate(180deg);//对Opera进行浏览器支持
    -moz-transform:rotate(180deg);//对Firefox进行浏览器支持

（3）、scale()：缩放效果
在css文件中加入如下代码：

    transform: scale(1,2);//宽度不变，高度变为原来2倍
    -webkit-transform: scale(1,2);//对chrome、safari进行浏览器支持
    -ms-transform:scale(1,2);//对IE进行浏览器支持
    -o-transform:scale(1,2);//对Opera进行浏览器支持
    -moz-transform:scale(1,2);//对Firefox进行浏览器支持

（4）、skew()：倾斜效果
在css文件中加入如下代码：

    transform: skew(50deg,100deg);//围绕X轴旋转50度，围绕Y轴旋转100度
    -webkit-transform: skew(50deg,100deg);//对chrome、safari进行浏览器支持
    -ms-transform:skew(50deg,100deg);//对IE进行浏览器支持
    -o-transform:skew(50deg,100deg);//对Opera进行浏览器支持
    -moz-transform:skew(50deg,100deg);//对Firefox进行浏览器支持

（5）、matrix()：矩阵

2、3D转换方法
（1）、rotateX()：
在css文件中加入如下代码：

    transform: rotateX(120deg);//围绕X轴旋转120度
    -webkit-transform: rotateX(120deg);//对chrome、safari进行浏览器支持
    -ms-transform:rotateX(120deg);//对IE进行浏览器支持
    -o-transform:rotateX(120deg);//对Opera进行浏览器支持
    -moz-transform:rotateX(120deg);//对Firefox进行浏览器支持

（2）、rotateY()：
在css文件中加入如下代码：

    transform: rotateY(120deg);//围绕Y轴旋转120度
    -webkit-transform: rotateY(120deg);//对chrome、safari进行浏览器支持
    -ms-transform:rotateY(120deg);//对IE进行浏览器支持
    -o-transform:rotateY(120deg);//对Opera进行浏览器支持
    -moz-transform:rotateY(120deg);//对Firefox进行浏览器支持