Webkit轉換不起作用，我應該怎麼做

這個代碼有什麼問題？它不適用於谷歌瀏覽器。我想用javascript和webkit轉換動態地旋轉圖片。Webkit轉換不起作用，我應該怎麼做

<html> 
    <head> 
    <title></title> 
    <script> 
     document.getElementById('img1').style.webkitTransform = "rotateX(-40deg)"; 
    </script> 
    </head> 
    <body> 
    <img id="img1" src="1.jpg" /> 
    </body> 
</html>

來源

2012-07-11 Alireza29675

試試這個 - 腳本需要的DOM加載後執行的 - 所以我提出它img元素之後出現

<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <img id="img1" src="1.jpg" /> 
    <script> 
    document.getElementById('img1').style.webkitTransform = "rotate(-40deg)"; 
    </script> 
</body> 
</html>

而且你使用了錯誤的webkitTransform功能...你應該是使用rotate

Working example

來源

2012-07-11 08:23:18 ManseUK

旋轉x軸是未定義的。改爲使用普通的rotate。此外，你試圖引用一個在運行時不存在的元素。要麼推遲腳本負載，或者：

這純粹是CSS，我建議，以取代整個<script>塊：

<style> 
#img1 { 
    -webkit-transform: rotate(-40deg); 
} 
</style>

注：此代碼將只顯示在基於WebKit的瀏覽器的旋轉。爲了達到最佳browser compatibility，不要忘記使用-moz-,-o-和-ms-和前綴前綴。

來源

2012-07-11 08:22:18

+1提示CSS是一個更好的主意.... – ManseUK 2012-07-11 08:26:01

腳本在加載時立即運行，文檔的head中的script標記已在加載主體之前運行。

如果您將script標記移動到body標記的末尾，則應該發現它不會引發錯誤。

來源

2012-07-11 08:22:22 steveukx

Webkit轉換不起作用，我應該怎麼做

回答

相關問題