jquery - 将图像旋转 360 度

Question

我有代码:

<div class="logo">
<a href="/">
<img src="/images/logo3.png" style="width:180px; margin-top:4px;">
</a>
</div>

和CSS:

#topnav #navcontainer .logo:hover {
  transform: rotateY(-360deg);
  -webkit-transform: rotateY(-360deg);
  -o-transform: rotateY(-360deg));
  -moz-transform: rotateY(-360deg);
  transition: 2.7s;
}

我需要再添加一张图片，例如:

<div class="logo">
<a href="/">
<img src="/images/logo3.png" style="width:180px; margin-top:4px;">
<img src="/images/logo4.png" style="width:180px; margin-top:4px;">
</a>
</div>

所以第二张图片将隐藏在网站上，但在悬停时我需要旋转第一张图片，然后旋转第二张图片，一个接一个。第一张图像完成旋转，然后开始旋转第二张图像。 我怎样才能实现这个动画？可能我也需要使用 jQuery，如果有人知道我会很高兴。 例如，您可以在网站上看到如何使用一张图片进行轮换。 example如果您将 Logo 悬停在左上方。现在它正在处理一张图片。我需要添加第二张图片并一张一张地旋转。

Answer 1

在纯 css 中，您可以使用 animation 获得第一个图像的旋转，并使用 transition 在第一个旋转完成后显示第二个图像，并使用相同的旋转效果，延迟 2 秒:

例如http://codepen.io/anon/pen/pvGNvO?editors=110

---

相关的 CSS

@-webkit-keyframes rotate {
    0% { transform: rotateY(0)  }
    100% { transform: rotateY(-360deg) }
}
@-moz-keyframes rotate {
    0% { transform: rotateY(0)  }
    100% { transform: rotateY(-360deg) }
}
@keyframes rotate {
    0% { transform: rotateY(0)  }
    100% { transform: rotateY(-360deg) }
}


img + img { 
   opacity: 0;

   /* on :hover the opacity turn to 1 (in 0s) with a delay of 2 seconds */
   -webkit-transition: opacity 0s 2s;
   -moz-transition: opacity 0s 2s;
   transition: opacity 0s 2s;
}

a:hover img {

    /* the animation is applied to both the images but... */
    -webkit-animation: rotate 2s linear 0s;
    -moz-animation: rotate 2s linear 0s;
    animation: rotate 2s linear 0s;
}

a:hover img + img {
    opacity: 1;

    /* ... for this image the rotation effect starts 2 seconds later */
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    animation-delay: 2s;
}