【一、項目背景】
隨著HTML5 CSS3的出現和發展,使得我們的網頁可以實現更加複雜的效果,也使得我們的瀏覽體驗更加豐富,所以今天我們將製作一個正方體的3D效果。
【二、項目分析】
想要利用CSS3實現3D立方體,就要清楚立方體是由六個面組成,分上下左右和前後,考慮這些可以幫助我們更好的融入CSS3的代碼。
因此我設置了6個div,作為立方體的6個面。因為定位的原因,一開始所有的盒子都是面對著屏幕這面的,因此要賦予每個面不一樣的值,即不一樣的位置它才能展現出來。
【三、需要的工具】
Adobe Dreamweaver
【四、項目目標】
實現3的l立方體旋轉,鼠標移上去實現縮放效果。
【五、項目實現】
1、打開Adobe Dreamweaver,新建html文檔。把標題改為“3d立方體”。
2、在body標籤,創建一個div盒子 ,給它class屬性,在外層div裡面在創建6個div表示立方體的六個面,同樣給它們 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、創建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>
方法說明:
rotateX() 方法
通過 rotateX() 方法,元素圍繞其 X 軸以給定的度數進行旋轉。
rotateY() 旋轉
通過 rotateY() 方法,元素圍繞其 Y 軸以給定的度數進行旋轉。
rotateZ() 旋轉
通過 rotateZ() 方法,元素圍繞其 Z 軸以給定的度數進行旋轉。
下表是部分屬性所代表的含義:
4、運行一下看下效果;點擊F12運行。
5、呈現的效果如下圖所示。
可以看到效果基本上可以 ,可是鼠標移上去沒有效果。
6、添加鼠標移上去縮放的效果
.box:hover{
transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5);
} # scale是縮放倍數
7、外層再添加一個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、點擊運行,效果如下圖所示。
2、鼠標移到立方體上,縮放效果展示,如下圖所示。
【七、總結】
1、整個效果寫出來,還是比較簡單的,只要明白各個命令的意思,剩下的就是組織一下邏輯而已。
2、歡迎大家積極嘗試,有時候看到別人實現起來很簡單,但是到自己動手實現的時候,總會有各種各樣的問題,切勿眼高手低,勤動手,才可以理解的更加深刻。
3、CSS樣式的效果不止這些,還有更加炫酷的效果,值得大家去學習。
4、實現的方法3d立方體的方法有很多,但這是最簡單的一種。
5、如果需要本文源碼,請在公眾號後臺回覆“立方體”四個字獲取。
看完本文有收穫?請轉發分享給更多的人
IT共享之家
入群請在微信後臺回覆【入群】