我可以帮忙翻译。要求将每个div用CSS3或JavaScript制作成波浪形移动,我尝试了很多次但是无法实现。我想让html里的每张图片都像旗帜一样随着波浪移动。
HTML:
<div id="stage" style="padding-left: 180px; height: 160px;">
<div id="spinner" style="-webkit-transform-origin: 180px 0 0;">
<img style="-webkit-transform: rotateY(0deg) translateX(180px); padding: 0 0 0 160px;" src="image/1.jpg" width="200" height="160" alt="">
<img style="-webkit-transform: rotateY(-50deg) translateX(180px); padding: 0 0 0 147px;" src="image/2.jpg" width="213" height="160" alt="">
<img style="-webkit-transform: rotateY(-144deg) translateX(180px); padding: 0 0 0 120px;" src="image/3.jpg" width="240" height="160" alt="">
<img style="-webkit-transform: rotateY(-216deg) translateX(180px); padding: 0 0 0 147px;" src="image/9.jpg" width="213" height="160" alt="">
<img style="-webkit-transform: rotateY(-288deg) translateX(180px); padding: 0 0 0 122px;" src="image/6.jpg" width="238" height="160" alt="">
</div>
</div>
CSS:层叠样式表
@-webkit-keyframes spinner {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-90deg);
}
}
#stage {
margin: 1em auto;
-webkit-perspective: 1200px;
}
#spinner {
-webkit-animation-name: spinner;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
-webkit-transform-style: preserve-3d;
}
#spinner:hover {
-webkit-animation-play-state: paused;
}
#spinner img {
position: absolute;
border: 1px solid #ccc;
background: rgba(255,255,255,0.8);
box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}