【CSS3練習】3D盒子制作

先發個3D盒子最終效果圖

在線效果預覽：http://dtdxrk.github.io/game/css3-demo/box-3d.html

制作步驟1：創建基本結構

分布把6個面定義到3×3的畫布上，1和4暫且是重疊的。

 

html結構比較簡單：

	<div class="box" id="box">
		<div class="layer">1</div>
		<div class="layer">2</div>
		<div class="layer">3</div>
		<div class="layer">4</div>
		<div class="layer">5</div>
		<div class="layer">6</div>
	</div>

 

CSS部分：

	*{margin:0;padding:0;}

	.box{margin:50px auto;width: 300px;height: 300px; border:1px solid #ccc;position: relative;}

	.layer{background-color: #000;width: 100px;height: 100px;position: absolute;color: #fff;line-height: 100px;font-size: 50px;text-align: center;}

	.layer:nth-of-type(1){top:100px;left:100px;opacity: 0.2;}
	.layer:nth-of-type(2){top:0px;left:100px;opacity: 0.4;}
	.layer:nth-of-type(3){top:200px;left:100px;opacity: 0.6;}
	.layer:nth-of-type(4){top:100px;left:100px;opacity: 0.8;}
	.layer:nth-of-type(5){top:100px;left:0;opacity: 0.4;}
	.layer:nth-of-type(6){top:100px;left:200px;opacity: 0.4;}

　　

　　

制作步驟2：把6個面3d旋轉到對應的位置上

首先body需要設置一個視距{perspective: 500px;}

然后給每個layer進行3d旋轉，並且根據對於的位置設置transform-origin，意思就是在什么位置進行旋轉。

 

旋轉一個面(2)： css添加：transform:rotateX(-90deg);transform-origin:bottom; 根據元素的底部旋轉x：-90

 

 

 

旋轉一個面(3)： css添加：transform:rotateX(90deg);transform-origin:top;

 

 

旋轉一個面(5)： css添加：transform:rotateY(90deg);transform-origin:right;

 

 

 

 

旋轉一個面(6)： css添加：transform:rotateY(-90deg);transform-origin:left;

 

 

 

 

 

 

最后把盒子封上(4)： css添加：background-color: red;transform:translateZ(100px); 4跟1的位置是一樣的，只需要進行3d Z到100px

 

制作步驟3：讓盒子旋轉起來

想讓盒子3d旋轉還需要給box加個css屬性 transform-style:preserve-3d 是一個3d透視的聲明

然后在給box設置一個旋轉中心就可以玩了transform-origin:50% 50% 50px;