【一、項(xiàng)目背景】
隨著HTML5 CSS3的出現(xiàn)和發(fā)展，使得我們的網(wǎng)頁(yè)可以實(shí)現(xiàn)更加復(fù)雜的效果，也使得我們的瀏覽體驗(yàn)更加豐富，所以今天我們將制作一個(gè)正方體的3D效果。
【二、項(xiàng)目分析】
想要利用CSS3實(shí)現(xiàn)3D立方體，就要清楚立方體是由六個(gè)面組成，分上下左右和前后，考慮這些可以幫助我們更好的融入CSS3的代碼。
因此我設(shè)置了6個(gè)div，作為立方體的6個(gè)面。因?yàn)槎ㄎ坏脑?，一開(kāi)始所有的盒子都是面對(duì)著屏幕這面的，因此要賦予每個(gè)面不一樣的值，即不一樣的位置它才能展現(xiàn)出來(lái)。
【三、需要的工具】
Adobe Dreamweaver
【四、項(xiàng)目目標(biāo)】
實(shí)現(xiàn)3的l立方體旋轉(zhuǎn)，鼠標(biāo)移上去實(shí)現(xiàn)縮放效果。
【五、項(xiàng)目實(shí)現(xiàn)】
1、打開(kāi)Adobe Dreamweaver，新建html文檔。把標(biāo)題改為“3d立方體”。
2、在body標(biāo)簽，創(chuàng)建一個(gè)div盒子 ，給它c(diǎn)lass屬性，在外層div里面在創(chuàng)建6個(gè)div表示立方體的六個(gè)面，同樣給它們 class屬性。
<body> <div class="box"> <div class="box2"> <div class="box-2">top</div> <div class="box-2">btm</div> <div class="box-2">left</div> <div class="box-2">right</div> <div class="box-2">face</div> <div class="box-2">back</div> </div> </div></body>3、創(chuàng)建CSS樣式
<style type="text/css">.box { width: 200px; height: 200px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; transition: all 2s; transform-style: preserve-3d; transform: rotateX(15deg) rotateY(-15deg);}.box:hover { transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5);}.box .box-2 { width: 100px; height: 100px; text-align: center; line-height: 100px; font-size: 1.2em; position: absolute; top: 0; left: 0;}.box .box-2:nth-child(1) { /*小立方體第一面*/ background: rgba(225,0,0,0.5); transform: rotateX(90deg) translateZ(50px); #角度 偏移量}.box .box-2:nth-child(2) { /*小立方體第二面*/ background: rgba(255,255,0,0.5); transform: rotateX(-90deg) translateZ(50px);}.box .box-2:nth-child(3) { /*小立方體第三面*/ background: rgba(225,0,255,0.5); transform: rotateY(-90deg) translateZ(50px);}.box .box-2:nth-child(4) { /*小立方體第四面*/ background: rgba(0,255,0,0.5); transform: rotateY(90deg) translateZ(50px);}.box .box-2:nth-child(5) { /*小立方體第五面*/ background: rgba(225,0,0,0.5); transform: translateZ(50px);}.box .box-2:nth-child(6) { /*小立方體第六面*/ background: rgba(0,0,255,0.5); transform: rotateY(180deg) translateZ(50px);}</style> </head> <body> <div class="box"> <div class="box2"> <div class="box-2">top</div> <div class="box-2">btm</div> <div class="box-2">left</div> <div class="box-2">right</div> <div class="box-2">face</div> <div class="box-2">back</div> </div> </div></body></html>方法說(shuō)明：
rotateX() 方法
通過(guò) rotateX() 方法，元素圍繞其 X 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。
rotateY() 旋轉(zhuǎn)
通過(guò) rotateY() 方法，元素圍繞其 Y 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。
rotateZ() 旋轉(zhuǎn)
通過(guò) rotateZ() 方法，元素圍繞其 Z 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。
下表是部分屬性所代表的含義：
屬性含義
width定義寬度
height定義高度
margin: auto位置居中
transform向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換
transform-origin允許你改變被轉(zhuǎn)換元素的位置。
transform-style規(guī)定被嵌套元素如何在 3D 空間中顯示
perspective規(guī)定 3D 元素的透視效果
perspective-origin規(guī)定 3D 元素的底部位置
backface-visibility定義元素在不面對(duì)屏幕時(shí)是否可見(jiàn)
4、運(yùn)行一下看下效果；點(diǎn)擊F12運(yùn)行。
5、呈現(xiàn)的效果如下圖所示。
可以看到效果基本上可以 ，可是鼠標(biāo)移上去沒(méi)有效果。
6、添加鼠標(biāo)移上去縮放的效果
.box:hover{ transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5);
} # scale是縮放倍數(shù)7、外層再添加一個(gè)3d立方體形成疊加效果
body代碼：
<div class="box"><div class="box-1">top</div><div class="box-1">btm</div><div class="box-1">left</div><div class="box-1">right</div><div class="box-1">face</div><div class="box-1">back</div></div>CSS樣式代碼
<style type="text/css">.box .box-1{ width: 200px; height: 200px; text-align: center; line-height: 200px; font-size: 2em; position: absolute; top: 0; left: 0; } .box .box-1:nth-child(1){ /*大立方體第一面*/ background: rgba(225,0,0,0.5); transform:rotateX(90deg) translateZ(100px);
}.box .box-1:nth-child(2){ /*大立方體第二面*/ background: rgba(255,255,0,0.5); transform:rotateX(-90deg) translateZ(100px);
}.box .box-1:nth-child(3){ /*大立方體第三面*/ background: rgba(225,0,255,0.5); transform:rotateY(-90deg) translateZ(100px); }.box .box-1:nth-child(4){ /*大立方體第四面*/ background: rgba(0,255,0,0.5); transform:rotateY(90deg) translateZ(100px);
}.box .box-1:nth-child(5){ /*大立方體第五面*/ background: rgba(225,0,0,0.5); transform:translateZ(100px); }.box .box-1:nth-child(6){ /*大立方體第六面*/ background: rgba(0,0,255,0.5); transform:rotateY(180deg) translateZ(100px); }</style>【六、效果展示】
1、點(diǎn)擊運(yùn)行，效果如下圖所示。
2、鼠標(biāo)移到立方體上，縮放效果展示，如下圖所示。
【七、總結(jié)】
1、整個(gè)效果寫(xiě)出來(lái)，還是比較簡(jiǎn)單的，只要明白各個(gè)命令的意思，剩下的就是組織一下邏輯而已。
2、歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
3、CSS樣式的效果不止這些，還有更加炫酷的效果，值得大家去學(xué)習(xí)。
4、實(shí)現(xiàn)的方法3d立方體的方法有很多，但這是最簡(jiǎn)單的一種。
