将图像旋转 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 如果您将徽标悬停在左上角。现在它正在处理一张图片。我需要添加第二张图片并一张一张地旋转。

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;
}

将图像旋转 360 度

rotate images 360 degrees

css

jquery

rotation

css-transitions