Question

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

请在此处查看Fiddle。

#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进行一些微调。

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

1 个答案: