*{
margin: 0px;
padding: 0px;
list-style: none;
}
ul{
width: 600px;
margin: 100px auto;
}
ul li{
float: left;
width: 120px;
height: 40px;
position: relative;
/*border: 1px solid #000;
transform: rotateX(30deg) rotateY(-131deg);*/
/*子盒子保持3D效果*/
transform-style: preserve-3d;
transition:all 0.8s;
}
ul li:nth-child(2){
transition-delay: 0.2s;
}
ul li:nth-child(3){
transition-delay: 0.4s;
}
ul li:nth-child(4){
transition-delay: 0.6s;
}
ul li:nth-child(5){
transition-delay: 0.8s;
}
li span{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
text-align: center;
line-height: 40px;
background-color: coral;
}
li span:nth-child(1){
transform: translateZ(20px);
}
li span:nth-child(2){
background-color: indianred;
transform: rotateX(90deg) translateZ(20px);
}
ul:hover li{
transform: rotateX(-90deg);
}
<ul>
<li>
<span>1111</span>
<span>2222</span>
</li>
<li>
<span>1111</span>
<span>2222</span>
</li>
<li>
<span>1111</span>
<span>2222</span>
</li>
<li>
<span>1111</span>
<span>2222</span>
</li>
<li>
<span>1111</span>
<span>2222</span>
</li>
</ul>
本文属于学习笔记仅供学习参考不做其他用途