最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

好了我們html代碼就準(zhǔn)備完成了,首先我們要有一個3d的思維,在大腦中現(xiàn)象一下魔方是什么樣子的,不就是用六個面組成的嗎。

二、添加css樣式

*{
    margin:0; 							    /* 默認樣式去掉邊距 */
    padding:0;
}
div{										 /* div通用樣式 設(shè)置高寬*/
    width: 300px;
    height: 300px;
    opacity:0.5;							/*透明度 半透明*/
}
.top{									 /* 通過類名設(shè)置顏色下面都是設(shè)置顏色*/
    background-color:brown;				
}
.bottom{
    background-color:blueviolet;
}
.left{
    background-color:blanchedalmond;
}
.right{
    background-color:cadetblue;
}
.after{
    background-color:chocolate;
}
.before{
    background-color:cyan;
}

好了到了這一步就相當(dāng)與把地基打好了，我們開始蓋樓了

你看到的必須是這個效果注意我這里是縮小了，你應(yīng)該也是和我一樣方塊都是挨著的，像柱子一樣堆著的。這下我們就要開始像紙片一樣把他們拼湊起來了。

2、讓div重合

div{							
    width: 300px;
    height: 300px;
    position: absolute;		/*在div的通用樣式中加上絕對定位*/
}
body{						/*下面這一步是居中讓所有的div在屏幕上居中*/
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

現(xiàn)在你們看到的是這個效果，明明6個方塊怎么只有一個，其實并不是，只是其他的div在這個div的后面，前面這個div擋住我們的視線了所以看不見。

三、開啟3d空間

body{
    transform-style: preserve-3d;   /*只需要這一條代碼開啟3d空間*/
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

在把div拼湊起來

.top{
    background-color:brown;
    transform:rotateX(90deg) translateZ(150px);   /*先旋轉(zhuǎn)在偏移*/
}
.bottom{
    background-color:blueviolet;
    transform:rotateX(-90deg) translateZ(150px);
}
.left{
    background-color:blanchedalmond;
    transform:rotateY(-90deg) translateZ(150px);
}
.right{
    background-color:cadetblue;
    transform:rotateY(90deg) translateZ(150px);
}
.after{
    background-color:chocolate;
    transform:rotateY(180deg) translateZ(150px);
}
.before{
    background-color:cyan;
    transform:rotateY(0deg) translateZ(150px);
}

你們看到的應(yīng)該還是這個樣子，其實我們已經(jīng)完成了魔方的拼接，只是魔方是平放著的我們看不出來，所以做一個動畫旋轉(zhuǎn)一下就ok了。你給div加上一點文字更容易觀察

四、動畫旋轉(zhuǎn)

    
        
        
        
*{
    margin:0;           
    /* 默認樣式去掉邊距 */
    padding:0;
}
div{
    width: 300px;
    height: 300px;
    position: absolute;
    opacity: 0.5;
    text-align: center;
    line-height: 300px;
}
body{
    transform-style: preserve-3d;
    height: 100vh;
    animation: fram1 10s ease;    				/*引用動畫*/
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top{
    background-color:brown;
    transform:rotateX(90deg) translateZ(150px);

}
.bottom{
    background-color:blueviolet;
    transform:rotateX(-90deg) translateZ(150px);
}
.left{
    background-color:blanchedalmond;
    transform:rotateY(-90deg) translateZ(150px);
}
.right{
    background-color:cadetblue;
    transform:rotateY(90deg) translateZ(150px);

}
.after{
    background-color:chocolate;
    transform:rotateY(180deg) translateZ(150px);
}
.before{
    background-color:cyan;
    transform:rotateY(0deg) translateZ(150px);
}
@keyframes fram1{		/*動畫旋轉(zhuǎn)X軸與Y軸*/
    0%,100%{
        transform: rotateY(0deg) rotateX(0deg);
    }
    50%{
        transform: rotateY(180deg) rotateX(180deg);

    }
}
        
    
    							
    	1