CSS在头像图像上以相反方向旋转2个图像

Question

当悬停中央图像时，这应该同时在相反方向上为2个圆圈部分设置动画。到目前为止，我只能通过将2个物体徘徊在一起来设置它们的动画效果。

这是目标：

这是我的CodePen： http://codepen.io/beng_beng/pen/Azstr

Answer 1

您应该在:hover上使用a#rotator代替：

a#rotator:hover > img{ 
 -webkit-transform: rotate(-360deg); 
 -moz-transform: rotate(-360deg); 
 -o-transform: rotate(-360deg);
 -ms-transform: rotate(-360deg); 
}

a#rotator:hover span img{ 
 -webkit-transform: rotate(360deg); 
 -moz-transform: rotate(360deg); 
 -o-transform: rotate(360deg);
 -ms-transform: rotate(360deg); 
}

Demo.