Question

这段代码的问题是什么？它无法在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>

Answer 1

未定义在x轴上旋转。请改用普通rotate。此外，您正在尝试引用在运行时不存在的元素。延迟脚本加载，或者：

这是纯CSS，我建议用：

替换整个<script>块

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

注意：此代码仅在基于webkit的浏览器中显示轮换。为了获得最佳browser compatibility，请不要忘记使用-moz-，-o-和-ms-以及无前缀的前缀。

Answer 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

Working example

Answer 3

当脚本在加载时立即运行时，文档的script中的head标记已在加载正文之前运行。

如果您将script标记移到body标记的末尾，您会发现它不会抛出错误。

Webkit转换不起作用，我该怎么办

3 个答案: