【发布时间】：2017-06-16 03:44:30
【问题描述】：
简而言之：我试图模仿这个滑块，但使用动画而不是过渡，所以我可以有自动播放选项：codepen.io/dudleystorey/pen/HrFBx
说明： 我正在开发一个使用动画的 CSS 滑块。这是 CodePen 上的链接：https://codepen.io/anon/pen/vZXQEa
编辑：我需要这个没有脚本
在代码中：
CSS：
body { margin: 0; background: #121; }
figure {
margin: 0;
position: relative;
perspective: 1800px;
transform-style: preserve-3d;
max-width: 1000px;
padding-bottom: 56.25%;
}
figure img {
top: 0;
left: 0;
position: absolute;
transition: 1s;
width: 100%;
}
@keyframes rotateFirst {
0%, 20%{
transform: rotateY(0deg);
}
80%, 100%{
transform: rotateY(180deg);
}
}
@keyframes rotateSecond {
0%, 20%{
transform: rotateY(-180deg);
}
80%, 100%{
transform: rotateY(0deg);
}
}
.first{
animation:rotateFirst 5s infinite;
}
.second{
animation:rotateSecond 5s infinite;
}
HTML：
<figure id=blinds-window>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
由于我是 CSS 动画的新手，我在这里面临两个简单的挑战：
1- 图像没有正确旋转，在我的 CodePen 链接上很容易注意到。他们可能会一起搬家。
2-我想在图像上添加文字。我尝试在图像上添加“测试”，但它不适用于我。
提前谢谢你！
【问题讨论】：
-
不确定您真正想要的是什么。悬停时图像会发生变化。请提供关于第一点的更多细节。对于第二点，如果您希望文本成为动画的一部分，则不能在 html 中添加文本。它需要成为图像本身的一部分，因为动画正在改变图像而不是 dom 元素。
-
请检查更新的 codepen 代码。谢谢！
-
再一次，我觉得旋转很好。你的意图是什么？你希望它们如何旋转？我可以看到它们就像一张正在旋转以显示背后图像的卡片。这不是你要找的吗？
-
我想要一张图片旋转，另一张在背景中。还有一张图突然出现，这不是我想要的
-
您可以旋转第二个并看到第一个在后面，就像这样codepen.io/anon/pen/gRLrrG ...但是第一个如何将自己定位在第二个上方的图层中然后旋转？我认为如果您绘制一些图纸并解释预期的输出应该是什么会很棒