你好，我被困在这里好几天了，我不知道该怎么办。如何去除&旋转div以改变图像时的Out效果。我猜是旋转的时机不对。
.spinner {
position: relative;
height: 300px;
width: 600px;
animation-name: rotate;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
background: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQugQCqanFP9X3akqA4XtDdm0qja8v9YxdT9OazMzCes7co2SqH');
background-size: cover;
transform-style: preserve-3d;
}
@keyframes rotate {
33.34% {
transform-style: preserve-3d;
background: url('http://media.indiatimes.in/media/content/2015/Apr/adidas-wiki_1428491439_725x725.jpg');
transform: rotateY(180deg);
top: 0;
left: 0;
background-size: cover;
position: absolute;
height: 300px;
width: 600px;
}
66.68% {
transform-style: preserve-3d;
background: url('http://slodive.com/wp-content/uploads/2013/02/popular-logos/puma-logo.jpg');
transform: rotateY(0deg);
top: 0;
left: 0;
background-size: cover;
position: absolute;
height: 300px;
width: 600px;
}
100% {
transform-style: preserve-3d;
background: url('data:image/png;base64,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');
transform: rotateY(180deg);
top: 0;
left: 0;
background-size: cover;
position: absolute;
height: 300px;
width: 600px;
}
}<div class="card_container">
<div class="spinner"></div>
</div>如果我理解你的要求，好吧，你想要这样:
技巧是你不希望你的背景图像平滑地变化。为了实现这一点，你需要设置两个具有不同属性的关键帧和一个非常接近的百分比。
例如，第一张图像为33.33%，第二张为33.34%。
在本例中，您需要设置
- 背景编号1，从0%到大约1/3 = 33.3%
- 背景数2，从33.34%变为约2/3 = 66.6%
- 背景数3，从66.7%变为100%
旋转必须是平滑的，所以你只能为每个旋转值设置1个关键帧。
.spinner {
position: absolute;
top: 0;
left: 0;
height: 300px;
width: 600px;
animation-name: rotate;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
background: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQugQCqanFP9X3akqA4XtDdm0qja8v9YxdT9OazMzCes7co2SqH');
background-size: cover;
transform-style: preserve-3d;
}
@keyframes rotate {
0% {
transform: rotateY(90deg);
}
0%, 33.33% {
background: url('http://media.indiatimes.in/media/content/2015/Apr/adidas-wiki_1428491439_725x725.jpg');
}
33.33% {
transform: rotateY(-90deg);
}
33.34%, 66.68% {
background: url('http://slodive.com/wp-content/uploads/2013/02/popular-logos/puma-logo.jpg');
}
66.68% {
transform: rotateY(90deg);
}
66.69%, 100% {
background: url('data:image/png;base64,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');
}
100% {
transform: rotateY(-90deg);
}
}<div class="card_container">
<div class="spinner"></div>
</div>