方法二：
步骤一：
一个大盒子包着6个小盒子；
步骤二：
大盒子的宽高和小盒子的一样；
步骤三：
子绝父相，让6个小盒子脱离文档流，叠在一起；
步骤四：
给6个小盒子设置不同背景颜色；
步骤五：
先做上下两个面，分别沿Y轴的上下各自平移宽度的一半，再继续围绕X轴各自旋转90deg。
步骤六：
先做左右两个面，分别沿X轴的左右各自平移宽度的一半，再继续围绕Y轴各自旋转90deg。
步骤七：
先做前后两个面，分别沿Z轴的前后各自平移宽度的一半。
步骤八：
给父元素加transform-style: preserve-3d;转成3d.
步骤九：
让父元素旋转，查看效果， transform:rotateY(30deg) rotateX(30deg);
HTML和CSS样式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>透明3D立体正方体</title> <style type="text/css"> body{ background: #000; } .box{ width: 200px; height: 200px; position: relative; margin:200px auto; transform-style: preserve-3d; transform:rotateY(0deg) rotateX(30deg); } p{ width: 200px; height: 200px; text-align: center; line-height: 200px; opacity: 0.5; position:absolute; left: 0px; top: 0px; } .one{ background: red; -webkit-transform: translateX(100px) rotateY(90deg); -moz-transform: translateX(100px) rotateY(90deg); -ms-transform: translateX(100px) rotateY(90deg); -o-transform: translateX(100px) rotateY(90deg); transform: translateX(100px) rotateY(90deg); } .two{ background: blue; -webkit-transform: translateX(-100px) rotateY(90deg); -moz-transform: translateX(-100px) rotateY(90deg); -ms-transform: translateX(-100px) rotateY(90deg); -o-transform: translateX(-100px) rotateY(90deg); transform: translateX(-100px) rotateY(90deg); } .three{ background: green; -webkit-transform: translateY(100px) rotateX(90deg); -moz-transform: translateY(100px) rotateX(90deg); -ms-transform: translateY(100px) rotateX(90deg); -o-transform: translateY(100px) rotateX(90deg); transform: translateY(100px) rotateX(90deg); } .four{ background: yellow; -webkit-transform: translateY(-100px) rotateX(90deg); -moz-transform: translateY(-100px) rotateX(90deg); -ms-transform: translateY(-100px) rotateX(90deg); -o-transform: translateY(-100px) rotateX(90deg); transform: translateY(-100px) rotateX(90deg); } .five{ background: pink; -webkit-transform: translateZ(100px); -moz-transform: translateZ(100px); -ms-transform: translateZ(100px); -o-transform: translateZ(100px); transform: translateZ(100px); } .sex{ background: orange; -webkit-transform: translateZ(-100px); -moz-transform: translateZ(-100px); -ms-transform: translateZ(-100px); -o-transform: translateZ(-100px); transform: translateZ(-100px); } </style> </head> <body> <div class="box"> <p class="one">1</p> <p class="two">2</p> <p class="three">3</p> <p class="four">4</p> <p class="five">5</p> <p class="sex">6</p> </div> </body> </html>
