这几天在学习H5，使用它做出的页面很炫，下面来一段H5制作的立方体；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .box{ width: 200px; height: 200px; margin:100px auto; position: relative; transform: rotate3d(1,1,0,200deg); transform-style: preserve-3d; perspective: 0px; perspective-origin: 100px 100px; } .box > div{ width: 200px; height: 200px; position: absolute; opacity: 0.5; } .front{ background-color: red; transform: translateZ(100px); } .back{ background-color: green; transform: translateZ(-100px) rotateY(180deg); } .left{ background-color: blue; /*移动+旋转*/ transform: translateX(-100px) rotateY(-90deg); } .right{ background-color: pink; transform: translateX(100px) rotateY(90deg); } .top{ background-color: purple; transform: translateY(-100px) rotateX(90deg); } .bottom{ background-color: orange; transform: translateY(100px) rotateX(-90deg); } </style> </head> <body> <div class="box"> <div class="front">front</div> <div class="back">back</div> <div class="left">left</div> <div class="right">right</div> <div class="top">top</div> <div class="bottom">bottom</div> </div> </body> </html> 文章来源: H5制作立方体