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

Question

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

请参阅此处的小提琴 。

#navBlueGear {
    float:left;
    transition: opacity 1s;
    opacity:0.5;}

#navBlueGear:hover {
    opacity:1.0;}

#aboutMe {
    position:relative;
    float:left;
    top:130px;
    left:-80px;
    opacity: 0;
    -webkit-transition: 1.5s;
    -moz-transition: 1.5s;
    -o-transition: 1.5s;
    transition: 1.5s;}

#navBlueGear:hover ~ #aboutMe {
    opacity: 1;}

.aboutLink {
    -webkit-transition:all 1.5s ease-out;
    -moz-transition:all 1.5s ease-out;
    -ms-transition:all 1.5s ease-out;
    -o-transition:all 1.5s ease-out;
    transition:all 1.5s ease-out;}

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

#navOrangeGear {
    position:relative;
    float:left;
    top:85px;
    left:-75px;
    transition: opacity 1s;
    opacity:0.5;}

#navOrangeGear:hover {
    opacity:1.0;}

#work {
    position:relative;
    float:left;
    top:176px;
    left:-143px;
    opacity: 0;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;}

#navOrangeGear:hover ~ #work {
    opacity: 1;}

.workLink {
    -webkit-transition:all 1.5s ease-out;
    -moz-transition:all 1.5s ease-out;
    -ms-transition:all 1.5s ease-out;
    -o-transition:all 1.5s ease-out;
    transition:all 1.5s ease-out;}

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

是否可以将对面的齿轮转向与您最初悬停的图像相反的方向，以及控制速度，以使每个齿轮的齿看上去都逼真？

CSS3中有可能吗？如果没有，我如何在JavaScript中完成呢？ 任何其他建议或意见，我们将不胜感激，我刚刚开始编写代码，在此先感谢您。

Answer 1

试试这个解决方案

http://jsfiddle.net/BRGG2/30/

我将所有元素都放在一个包含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进行一些微调。