創(chuàng)建HTML結(jié)構(gòu)
我們創(chuàng)建一個(gè)父容器够掠，里面保存正方體六個(gè)面
<div class="mBox">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="before"></div>
<div class="after"></div>
</div>
創(chuàng)建CSS樣式
.mBox {
width: 200px;
height: 200px;
margin: 50px auto;
top: 100px;
transform-style: preserve-3d; /*開(kāi)啟3D*/
position: relative;
transform: rotateY(-45deg) rotateX(-45deg);
animation: move 100s linear infinite;/*添加的觀測(cè)動(dòng)畫(huà)效果*/
}
div {
width: 200px;
height: 200px;
position: absolute;
opacity: .8;
}
設(shè)置每個(gè)面的樣式
.top{
background-color: rgb(18, 196, 136);
transform: translateZ(100px);
}
.bottom{
background-color: rgb(70, 147, 209);
transform: translateZ(-100px);
}
.left{
background-color: rgb(189, 79, 112);
transform: translateX(-100px) rotateY(90deg);
}
.right{
background-color: rgb(59, 212, 59);
transform: translateX(100px) rotateY(90deg);
}
.before{
background-color: rgb(158, 136, 64);
transform: translateY(100px) rotateX(90deg);
}
.after{
background-color: rgb(9, 82, 57);
transform: translateY(-100px) rotateX(90deg);
}
我們?yōu)檎襟w添加一個(gè)動(dòng)畫(huà)效果，觀測(cè)一下
@keyframes move {
0%{
transform: rotateY(-45deg) rotateX(45deg);
}
100%{
transform: rotateY(10000deg) rotateX(5000deg);
}
}
最后效果如下
旋轉(zhuǎn)正方體
