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

【问题标题】：Webkit transform doesn't work, what should I doWebkit 转换不起作用，我该怎么办
【发布时间】：2012-07-11 08:18:18
【问题描述】：

这段代码有什么问题？它不适用于谷歌浏览器。我想用 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>

【问题讨论】：

标签： javascript html webkit transform

【解决方案1】：

试试这个——脚本需要在 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

【讨论】：

【解决方案2】：

在 x 轴上旋转是未定义的。请改用普通的rotate。此外，您试图引用在运行时不存在的元素。要么推迟脚本加载，要么：

它是纯 CSS，我建议将整个 <script> 块替换为：

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

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

【讨论】：

【解决方案3】：

由于脚本在加载后立即运行，因此您文档的head 中的script 标记在正文加载之前已经运行。

如果你把script标签移动到body标签的末尾，你应该会发现它并没有抛出错误。

【讨论】：