1

这段代码有什么问题？它不适用于谷歌浏览器。我想用 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。此外，您试图引用在运行时不存在的元素。要么推迟脚本加载，要么：

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

<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 函数......你应该使用旋转

工作示例

于 2012-07-11T08:23:18.497 回答
1

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

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

于 2012-07-11T08:22:22.857 回答