Alireza29675 Alireza29675 - 4 months ago 11
Javascript Question

Webkit tranform doesn't work, what should I do

whats the problem with this code? It doesn't work on Google Chrome. I want to rotate the picture dynamically with javascript and webkit transform.

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

Answer

Try this instead - the script needs to be executed after the DOM has loaded - so i have moved it to appear after the img element

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

And your using the wrong webkitTransform function ... you should be using rotate

Working example