方法二：
步骤一：
一个大盒子包着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>
