本文介绍了一种使用纯CSS实现的3D翻转效果，通过设置不同的:hover状态来改变元素的rotateY角度，从而形成流畅的翻转动画。适用于创建具有视觉吸引力的网页布局。
* {
margin:0;
padding:0;
}
ul {
list-style:none;
}
body {
background-color:black;
overflow:hidden;
perspective:1000px;
}
.box {
width:316px;
height:387px;
border:5px solid #fc3;
margin:100px auto;
transition:all 1s;
transform-origin:center bottom;
}
.box ul {
position:relative;
width:306px;
height:377px;
border:5px solid #fc3;
transform-style:preserve-3d;
perspective:1000px;
}
.boxul li {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transition:all 1s;
transform-origin:left center;
border:1px solid gold;
box-sizing:border-box;
}
.box ul li img {
width:100%;
height:100%;
}
.box:hover {
transform:rotateX(45deg);
}
.box ul:hover li:nth-child(6) {
transform:rotateY(-160deg);
transition:all 1s 2s;
}
.box ul:hover li:nth-child(5) {
transform:rotateY(-120deg);
transition:all 1s 3s;
}
.box ul:hover li:nth-child(4) {
transform:rotateY(-100deg);
transition:all 1s 4s;
}
.box ul:hover li:nth-child(3) {
transform:rotateY(-70deg);
transition:all 1s 5s;
}
.box ul:hover li:nth-child(2) {
transform:rotateY(-40deg);
transition:all 1s 6s;
}
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
