这篇文章主要给大家介绍了css3利用三维变形实现立体方块的方法，文中给出了完整的实例代码，感兴趣的朋友们可以自己运行后看看效果，只有自己动手了才能更好的学习，下面来一起看看吧。
前言
三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3d变形的功能和2d变换的功能类似。3d变形与2d变形的最大不同就在于其参考的坐标轴不同，2d变形的坐标轴是平面的，只存在x轴和y轴，而3d变形的坐标轴则是x、y、z三条轴组成的立体空间，x轴正向是朝右，y周正向是朝下，z轴正向是朝屏幕外。
静态效果图如下：
实例代码
<!doctype html><html> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <title>css3三维变形</title> <!-- --> <style type="text/css"> * { margin: 0; padding: 0; } .box { position:relative; top: 100px; width:300px; height: 300px; margin: 0 auto; background-color: #ccc; /* 透视效果 越大透视距离越平面，反之亦然 */ perspective:800px; } .content { /*3d视图*/ transform-style: preserve-3d; /*过度动画*/ transition: all 3s linear; width:200px; height: 200px; position: absolute; top: 50px; left: 50px; } /* 经过顺时针旋转 */ .content:hover { transform: rotatex(180deg) rotatey(180deg); } /* 方块公共样式 */ .side { position: absolute; height: 200px; width: 200px; border: 2px solid #000; background: rgba(0,0,0,0.3); color: #fff; line-height: 200px; font-size: 30px; font-weight: bold; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); } /* 前 */ .side1 { transform: translatez(100px); } /* 后 */ .side2 { transform: rotatex(180deg) translatez(100px); } /* 左 */ .side3 { transform: rotatey(-90deg) translatez(100px); } /* 右 */ .side4 { transform: rotatey(90deg) translatez(100px); } /* 上 */ .side5 { transform: rotatex(90deg) translatez(100px); } /* 下 */ .side6 { transform: rotatex(-90deg) translatez(100px); } </style> </head> <body> <!-- begin --> <p class="box"> <p class="content"> <p class="side side1">1</p> <p class="side side2">2</p> <p class="side side3">3</p> <p class="side side4">4</p> <p class="side side5">5</p> <p class="side side6">6</p> </p> </p> <!-- end --> </body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
关于css3图片边框border-image的用法
关于css3制作的20种loading动效
关于css3绘制六边形的方法
以上就是css3三维变形实现立体方块的详细内容。