CSS3实现3D旋转立方体

CSS3实现3D旋转立方体

html:

<div class="box">
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
<li>BOOTSTRAP</li>
<li>VUE</li>
</ul>
</div>

css:

设置背景渐变，代码如下：

*{
margin: 0;
padding: 0;
list-style: none;
font-size: 24px;
color: #fff;
}
body{
perspective: 1000px;
animation: backChange 10s alternate infinite;
}
@keyframes backChange{
0%{background-color: red;}
17%{background-color: orange;}
34%{background-color: yellow;}
51%{background-color: green;}
68%{background-color: cyan;}
85%{background-color: blue;}
100%{background-color: purple;}
}

效果如下所示：

设置ul的样式，代码如下所示：

.box>ul{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
animation: animate-preserve 20s linear infinite;
}
.box>ul li{
width: 200px;
height: 200px;
text-align: center;
opacity: 0.5;
border: 10px outset #9c9deb;
box-sizing: border-box;
position: absolute;
transform-style: preserve-3d;
}

效果如下所示：

设置立方体的6个面，代码如下所示：

.box li:nth-of-type(1){
background-color: chocolate;
transform: translateZ(100px);
}
.box li:nth-of-type(2){
background-color: blueviolet;
transform: translateZ(-100px);
}
.box li:nth-of-type(3){
background-color: red;
transform: translateZ(-100px) rotateY(-90deg);
transform-origin: left;
}
.box li:nth-of-type(4){
background-color: deeppink;
transform: translateZ(-100px) rotateY(90deg);
transform-origin: right;
}
.box li:nth-of-type(5){
background-color: salmon;
transform: translateZ(100px) rotateX(90deg);
transform-origin: bottom;
}
.box li:nth-of-type(6){
background-color: slateblue;
transform: translateZ(-100px) rotateX(90deg);
transform-origin: top;
}
.box li:hover{
opacity: 1;
}

6个面设置好，设置动画效果，代码如下：

@keyframes animate-preserve{
0%{
transform: rotateX(0deg) rotateY(0deg);
}
100%{
transform: rotateX(-360deg) rotateY(360deg);
}
}

最后效果如下所示：