<style>
*{
margin: 0;
padding: 0;
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: green;
}
li span:nth-child(1){
transform:translateZ(20px);
transform-origin: center;
background-color: yellow;
}
li span:nth-child(2){
transform-origin: center;
transform:rotateX(-90deg) translateZ(20px);
}
ul:hover li{
transform:rotateX(90deg);
}
</style>
<body>
<ul>
<li>
<span>哈哈哈哈</span>
<span>嘻嘻嘻嘻</span>
</li>
<li>
<span>哈哈哈哈</span>
<span>嘻嘻嘻嘻</span>
</li><li>
<span>哈哈哈哈</span>
<span>嘻嘻嘻嘻</span>
</li><li>
<span>哈哈哈哈</span>
<span>嘻嘻嘻嘻</span>
</li><li>
<span>哈哈哈哈</span>
<span>嘻嘻嘻嘻</span>
</li>
</ul>
</body>
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
