1

このコードの問題は何ですか? Google Chrome では動作しません。javascript と webkit 変換を使用して画像を動的に回転させたい。

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

3 に答える 3

2

x軸上での回転は定義されていません。rotate代わりにプレーンを使用してください。さらに、実行時に存在しない要素を参照しようとしています。スクリプトのロードを延期するか、次のいずれかを実行します。

<script>これは純粋なCSSです。ブロック全体を次のように置き換えることをお勧めします。

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

注：このコードは、Webkitベースのブラウザーでのみローテーションを表示します。ブラウザの互換性を最適化するため-moz-に、、、-o-および-ms-プレフィックスなしのプレフィックスを使用することを忘れないでください。

于 2012-07-11T08:22:18.907 に答える
2

代わりにこれを試してください-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を使用する必要があります

実例

于 2012-07-11T08:23:18.497 に答える
1

スクリプトはロードされるとすぐに実行されるため、ドキュメントscriptののタグheadは本文がロードされる前に実行されます。

scriptタグをタグの最後に移動すると、bodyエラーがスローされないことがわかります。

于 2012-07-11T08:22:22.857 に答える