css 3d立方體

weapon 發(fā)布于2019-08-29 13:14 / 2012人閱讀

了解一些css3動畫知識，3d效果實現(xiàn)。
原文連接

狀態(tài)1 首先創(chuàng)建一個立方體容器元素

.box {
     position: relative;
     width: 100px;
     height: 100px;
     transform-style: preserve-3d;
}

transform-style 屬性的定義為規(guī)定如何在3d空間中呈現(xiàn)被嵌套元素
flat為默認值平面顯示，preserve-3d為子元素保留3d位置
也就是該屬性在需要展示3d效果元素的父元素上設(shè)置

立方體的六個面

創(chuàng)建6個div元素設(shè)置相同絕對定位顯示，為了效果明顯每個面設(shè)置了0.5的透明度。

.box div {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: .5;
     transform-origin: center;
}

transform-origin 屬性設(shè)置被轉(zhuǎn)換元素的位置，可以理解為轉(zhuǎn)換的中心點在哪個位置

狀態(tài)2

為了顯示出立方體的上下面和側(cè)面需要對4個面進行繞X、Y軸的直角轉(zhuǎn)換

.box div:nth-of-type(1),
.box div:nth-of-type(2){
     transform: rotatex(90deg);
}

.box div:nth-of-type(3),
.box div:nth-of-type(4){
     transform: rotatey(90deg);
}

可以給容器增加一定角度突出效果

.box{
     transform: rotatex(45deg) rotatey(45deg);
}

狀態(tài)3

接下來就是撐開6個面，構(gòu)建成為立方體啦
在每個面轉(zhuǎn)換的基礎(chǔ)上增加/減少寬高二分之一的Z軸位置轉(zhuǎn)換

.box div:nth-of-type(1){
     transform: rotatex(90deg) translatez(50px);
}

.box div:nth-of-type(2){
     transform: rotatex(90deg) translatez(-50px);
}

.box div:nth-of-type(3){
     transform: rotatey(90deg) translatez(50px); 
}

.box div:nth-of-type(4){
     transform: rotatey(90deg) translatez(-50px); 
}

.box div:nth-of-type(5){
     transform: translatez(50px); 
}

.box div:nth-of-type(6){
     transform: translatez(-50px); 
}

這樣一個3d立方體就已經(jīng)構(gòu)建完成啦 ^_^