Javascript HTML5/CSS3图像旋转由另一个图像悬停启动

当您将鼠标悬停在任一图像上时，每个图像都会旋转360度，不透明度从50%更改为100%，显示下面的图像文本。我正试图旋转相反的图像，从中我将鼠标悬停在上面以模拟旋转齿轮

看这里

是否可以将相反的齿轮计数器转到最初悬停的图像上，并控制速度，因为每个齿轮的齿都需要看起来逼真

在CSS3中可能吗？如果不可能，我将如何在JavaScript中实现这一点？如果您有任何其他建议或建议，我将不胜感激。我刚刚开始编写代码，请提前感谢。

尝试此解决方案

我将所有元素放在一个包含div中，并将旋转设置为在该div悬停时工作。 每个装备都有自己的不透明度和悬停链接

我用这个设置了第二档，让它朝相反的方向转动

#container:hover .workLink {
    -webkit-transform:rotate(-360deg);
    -moz-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
    -o-transform:rotate(-360deg);
    transform:rotate(-360deg);
}

---

至于校准两个档位的速度，这将需要一些微调，使用

-webkit transition duration

如果解释准确，要求包括显示为档位移动效果的图像？在JSFIDLE的原始帖子中，所描述的效果似乎在某些on

css

:hover

位置短暂出现。可能会将

变换

，

转换

片段放入

css

动画，

@关键帧

块中。看最后能找到什么。添加div容器正是我想要的解决方案。从那里开始，它是关于调整较小齿轮的旋转，使之与较大齿轮的旋转一致。持续时间是一个很好的建议，但将较小的齿轮进一步旋转到=540度，使它们在相同的持续时间内开始、转动和停止，看起来更加干净。谢谢你的帮助@Gil。

#container:hover .workLink {
    -webkit-transform:rotate(-360deg);
    -moz-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
    -o-transform:rotate(-360deg);
    transform:rotate(-360deg);
}