css3旋转木马效果
程序员文章站
2022-03-19 15:49:14
...
css3旋转木马效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转木马效果</title>
</head>
<style>
#app{
position: relative;
width: 600px;
height: 600px;
margin: 0 auto;
/*CSS3透视效果：perspective*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
transform:rotateX(-10deg);
animation:aa 10s linear infinite;
}
img{
position: absolute;
top:160px;
left:300px;
width: 200px;
height: 200px;
display: block;
/*必须加box-shadow，非常重要*/
box-shadow:0 0 20px rgba(0,0,0,.9)inset;
}
img:nth-child(2){
transform:rotateY(0deg) translateZ(300px);
}
img:nth-child(3){
transform:rotateY(60deg) translateZ(300px);
}
img:nth-child(4){
transform:rotateY(120deg) translateZ(300px);
}
img:nth-child(5){
transform:rotateY(180deg) translateZ(300px);
}
img:nth-child(6){
transform:rotateY(240deg) translateZ(300px);
}
img:nth-child(7){
transform:rotateY(300deg) translateZ(300px);
}
@keyframes aa {
0% {
transform:rotateX(-20deg) rotateY(0deg);
}
10% {
transform:rotateX(-20deg) rotateY(36deg);
}
20% {
transform:rotateX(-20deg) rotateY(72deg);
}
30% {
transform:rotateX(-20deg) rotateY(108deg);
}
40% {
transform:rotateX(-20deg) rotateY(144deg);
}
50% {
transform:rotateX(-20deg) rotateY(180deg);
}
60% {
transform:rotateX(-20deg) rotateY(216deg);
}
70% {
transform:rotateX(-20deg) rotateY(252deg);
}
80% {
transform:rotateX(-20deg) rotateY(288deg);
}
90% {
transform:rotateX(-20deg) rotateY(324deg);
}
100% {
transform:rotateX(-20deg) rotateY(360deg);
}
}
</style>
<body>
<div id="app">
<img src="0.jpg" alt="" class="img">
<img src="1.jpg" alt="" class="img">
<img src="2.jpg" alt="" class="img">
<img src="3.jpg" alt="" class="img">
<img src="4.jpg" alt="" class="img">
<img src="5.jpg" alt="" class="img">
<img src="6.jpg" alt="" class="img">
</div>
</body>
</html>