css3动画2D、3D转换的方法

来源：皓榕美食网
这篇文章介绍css3动画2D、3D转换的方法
css3动画的2D、3D转换代码:
<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8">
 <title>css3动画</title>
 <style type="text/css">
 p{width:100px;height:100px;background: rebeccapurple;color:#fff;}
 .p1{
 /*translate:移动(x,y)*/
 transform:translate(100px,100px);
 -webkit-transform: translate(100px,100px);/*safari,chrome*/
 -ms-transform: translate(100px,100px);/*IE*/
 -o-transform:translate(100px,100px);/*opera*/
 -moz-transform: translate(100px,100px);/*firefox*/
 }
 .p2{
 /*rotate:旋转(旋转角度edg)*/
 transform:rotate(100deg);
 -webkit-transform:rotate(100deg);/*safari,chrome*/
 }
 .p3{
 /*scale:缩放(宽，高)*/
 transform:scale(1,2);
 -webkit-transform:scale(1,2);/*safari,chrome*/
 }
 .p4{
 /*skew:倾斜(围绕x轴旋转，围绕y轴旋转)*/
 transform:skew(20deg,20deg);
 -webkit-transform:skew(20deg,20deg);/*safari,chrome*/
 }
 .p5{
 /*matrix矩阵，定义 2D 转换，使用六个值的矩阵
 定义 3D 转换，使用 16 个值的 4x4 矩阵*/
 transform:matrix(0.586,0.8,-0.8,0.866,0,0);
 -webkit-transform: matrix(0.586,0.8,-0.8,0.866,0,0);
 }

 /*3D转换*/
 .p6{
 /*rotateX:(围绕x轴旋转)*/
 /*rotateY:(围绕y轴旋转)*/
 transform:rotateX(120deg);
 -webkit-transform:rotateX(120deg);/*safari,chrome*/
 }
 </style></head><body><p>这个是测试1</p><br/><p class="p1">这个是测试2</p><br/><p class="p2">这个是测试2</p><br/><p class="p3">这个是测试2</p><br/><p class="p4">这个是测试2</p><br/><p class="p5">这个是测试2</p><br/><p class="p6">这个是测试2</p><br/></body></html>