在css3中，可以使用transform属性配合translate()、scale()、rotate()、skew()、skewx()、skewy()等函数实现元素的2d转化，将元素进行旋转，缩放，移动，倾斜等。
本教程操作环境：windows7系统、css3&&html5版、dell g3电脑。
在css3中，可以使用transform属性实现2d转化。
transform属性应用于元素的2d或3d转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
transform属性实现2d转化的函数
值描述
matrix(n,n,n,n,n,n) 定义 2d 转换，使用六个值的矩阵。
translate(x,y) 定义 2d 转换。
translatex(x) 定义转换，只是用 x 轴的值。
translatey(y) 定义转换，只是用 y 轴的值。
scale(x[,y]?) 定义 2d 缩放转换。
scalex(x) 通过设置 x 轴的值来定义缩放转换。
scaley(y) 通过设置 y 轴的值来定义缩放转换。
rotate(angle) 定义 2d 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义沿着 x 和 y 轴的 2d 倾斜转换。
skewx(angle) 定义沿着 x 轴的 2d 倾斜转换。
skewy(angle) 定义沿着 y 轴的 2d 倾斜转换。
示例：
<!doctype html><html> <head> <style> *, *:after, *:before { box-sizing: border-box; } body { background: #f5f3f4; margin: 0; padding: 10px; font-family: 'open sans', sans-serif; text-align: center; } h2, h4 { font-weight: 400; color: #4d4d4d; } .card { display: inline-block; margin: 10px; background: #fff; padding: 10px; min-width: 180px; box-shadow: 0 3px 5px #ddd; color: #555; } .card .box { width: 60px; height: 60px; margin: auto; background: #ddd; cursor: pointer; box-shadow: 0 0 5px #ccc inset; } .card .box .fill { width: 60px; height: 60px; position: relative; background: #03a9f4; opacity: .5; box-shadow: 0 0 5px #ccc; -webkit-transition: 0.3s; transition: 0.3s; } .card p { margin: 25px 0 0; } .rotate:hover .fill { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .scale:hover .fill { -webkit-transform: scale(2, 2); transform: scale(2, 2); } .scalex:hover .fill { -webkit-transform: scalex(2); transform: scalex(2); } .scaley:hover .fill { -webkit-transform: scaley(2); transform: scaley(2); } .skew:hover .fill { -webkit-transform: skew(45deg, 45deg); transform: skew(45deg, 45deg); } .skewx:hover .fill { -webkit-transform: skewx(45deg); transform: skewx(45deg); } .skewy:hover .fill { -webkit-transform: skewy(45deg); transform: skewy(45deg); } .translate:hover .fill { -webkit-transform: translate(45px, 1em); transform: translate(45px, 1em); } .translatex:hover .fill { -webkit-transform: translatex(45px); transform: translatex(45px); } .translatey:hover .fill { -webkit-transform: translatey(45px); transform: translatey(45px); } .matrix:hover .fill { -webkit-transform: matrix(2, 2, 0, 2, 45, 0); transform: matrix(2, 2, 0, 2, 45, 0); } </style> </head> <body> <!-- rotate--> <div class="card"> <div class="box rotate"> <div class="fill"></div> </div> <p>rotate(45deg) </p> </div> <!-- scale--> <div class="card"> <div class="box scale"> <div class="fill"></div> </div> <p>scale(2)</p> </div> <div class="card"> <div class="box scalex"> <div class="fill"></div> </div> <p>scalex(2) </p> </div> <div class="card"> <div class="box scaley"> <div class="fill"></div> </div> <p>scaley(2) </p> </div> <!-- skew--> <div class="card"> <div class="box skew"> <div class="fill"></div> </div> <p>skew(45deg, 45deg) </p> </div> <div class="card"> <div class="box skewx"> <div class="fill"></div> </div> <p>skewx(45deg)</p> </div> <div class="card"> <div class="box skewy"> <div class="fill"></div> </div> <p>skewy(45deg)</p> </div> <!-- translate--> <div class="card"> <div class="box translate"> <div class="fill"></div> </div> <p>translate(45px) </p> </div> <div class="card"> <div class="box translatex"> <div class="fill"></div> </div> <p>translatex(45px)</p> </div> <div class="card"> <div class="box translatey"> <div class="fill"></div> </div> <p>translatey(45px)</p> </div> <div class="card"> <div class="box matrix"> <div class="fill"></div> </div> <p> matrix(2, 2, 0, 2, 45, 0)</p> </div> </body></html>
（学习视频分享：css视频教程、web前端）
以上就是css3怎么实现2d转化的详细内容。