由另一個圖像懸停啟動的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進行一些微調。