CSS轉換不能在圖像上工作

Question

我已經爲div元素創建了一個工作轉換，但是，當我嘗試將完全相同的方法應用於圖像類時，它不起作用。而不是順利地移動到左邊，它跳到左邊。旋轉變換動畫確實有效，但不是左轉換。

.firstimg{ 
width: 5%; 
cursor: pointer; 
position: absolute; 
    -webkit-transition: all 0.4s ease; 
    -moz-transition: all 0.4s ease; 
    -ms-transition: all 0.4s ease; 
    -o-transition: all 0.4s ease; 
     transition: all 0.4s ease; 
} 

.turnedimg{ 
width: 5%; 
cursor: pointer; 
/*left: 12% !important;*/ 
position: absolute; 

-webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
     transform: rotate(90deg); 

    -webkit-transition: all 0.4s ease; 
    -moz-transition: all 0.4s ease; 
    -ms-transition: all 0.4s ease; 
    -o-transition: all 0.4s ease; 
     transition: all 0.4s ease; 
} 

我不明白爲什麼輪換可以工作，但轉換沒有。我怎樣才能使動畫工作？如果有人有興趣，我打電話通過JQuery

$(".firstimg").toggleClass("turnedimg"); 

Answer 1

您的圖片必須爲 '左'

.firstimg{ 
width: 5%; 
left: 0%; 
cursor: pointer; 
... 

Answer 2

您的代碼工作（working DEMO）。

但是您必須致電$(".firstimg").toggleClass("turnedimg");參加活動。

例如，您可以使用$(document).ready();或$(selector).click();。

Here你可以找到所有的JQuery事件。

//When page is loaded 
 
$(document).ready(function() { 
 
    $(".firstimg").toggleClass("turnedimg"); 
 
    
 
    
 
    //On click 
 
    $(".firstimg").click(function() { 
 
    $(".firstimg").toggleClass("turnedimg"); 
 
    }); 
 
});

.firstimg { 
 
    width: 5%; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 400px; 
 
    height: 400px; 
 
    -webkit-transition: all 0.4s ease; 
 
    -moz-transition: all 0.4s ease; 
 
    -ms-transition: all 0.4s ease; 
 
    -o-transition: all 0.4s ease; 
 
    transition: all 0.4s ease; 
 
} 
 

 
.turnedimg { 
 
    width: 5%; 
 
    cursor: pointer; 
 
    /*left: 12% !important;*/ 
 
    position: absolute; 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
    -webkit-transition: all 0.4s ease; 
 
    -moz-transition: all 0.4s ease; 
 
    -ms-transition: all 0.4s ease; 
 
    -o-transition: all 0.4s ease; 
 
    transition: all 0.4s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<img class="firstimg" src="http://www.placehold.it/400/400"> 
 

 
<p> 
 
Try to click the image 
 
</p>

Answer 3

您的代碼看起來不錯，你確定你把toggleClass的$(document).ready()裏面？

試試這個：

$(document).ready(function() { 
    $(".firstimg").toggleClass("turnedimg"); 
});