* {
padding:0;
margin:0;
}
body {
background:#000;
}
.box1 {
position:relative;
width:100%;
margin:0 auto;
}
h1 {
text-align:center;
color:#fff;
}
.zhu {
width:200px;
position:absolute;
top:50px;
left:700px;
}
.zhu a {
font-size:40px;
color:#fff;
text-decoration:none;
letter-spacing:15px;
}
.box2 {
width:200px;
height:300px;
position:relative;
margin:200px auto;
transform-style:preserve-3d;
animation:fn 10s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
img {
width:300px;
height:400px;
}
.box2 div {
width:200px;
height:300px;
position:absolute;
left:0;
top:0;
}
.box2:hover {
animation-play-state:paused;
}
.img1 {
transform:rotateY(0deg) translateZ(485px);
}
.img2 {
transform:rotateY(40deg) translateZ(485px);
}
.img3 {
transform:rotateY(80deg) translateZ(485px);
}
.img4 {
transform:rotateY(120deg) translateZ(485px);
}
.img5 {
transform:rotateY(160deg) translateZ(485px);
}
.img6 {
transform:rotateY(200deg) translateZ(485px);
}
.img7 {
transform:rotateY(240deg) translateZ(485px);
}
.img8 {
transform:rotateY(280deg) translateZ(485px);
}
.img9 {
transform:rotateY(320deg) translateZ(485px);
}
@keyframes fn {
0% {
transform:rotateX(-15deg) rotateY(0deg);
}
100% {
transform:rotateX(-15deg) rotateY(360deg);
}
}
9008
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
