1.效果展示;
2.html代码模块
<div class="box">
<div class="front">前面</div>
<div class="back">后面</div>
<div class="top">顶面</div>
<div class="bottom">底面</div>
<div class="left">左面</div>
<div class="right">右面</div>
</div>
3.样式模块
*{
margin: 0;
padding: 0;
}
div {
height: 100px;
width: 100px;
}
.box {
position: relative;
margin: 100px auto;
width: 300px;
transform-style: preserve-3d;
animation:rotate 15s infinite;/*animation:动画名字 时长 无限循环 线性速度(匀速)*/
}
@keyframes rotate{
from{
transform:rotateY(0deg) rotateX(0deg);
}
to{
transform: rotateY(360deg) rotateX(360deg);
}
}
.box>div {
position: absolute;
opacity: 0.8;
}
.front {
background: #FF3399;
transform: translateZ(50px);
}
.back {
background: #3366FF;
transform: translateZ(-50px);
}
.top {
background: #FF6600;
transform: translateY(-50px) rotateX(90deg);
}
.bottom {
background: #00CC00;
transform: translateY(50px) rotateX(-90deg);
}
.left {
background: #FF3333;
transform: translateX(50px) rotateY(-90deg);
}
.right {
background: blue;
transform: translateX(-50px) rotateY(90deg);
}