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