1

采用以下代码：

<html>
    <body onload="x=0" onkeydown="document.images[0].style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation='+(x=++x%4)+')'">
    <img src="DSCF0353.jpg" height=900>
</html>

为什么在 Windows 7/IE9 中每次击键时显示的图像循环 90° 旋转，为什么在 Windows 8/IE10 中不会这样做（图像不旋转）？什么代码会在 Windows 8/IE10 中产生旋转（如果可能，与上面类似）？

4

2 回答 2

1

感谢我收到的三个回复。Sandeep 提到的 css3 rotate属性似乎是最直接的解决方案，我跟进它在这里发现了最直接的答案：Rotating text with CSS3/HTML5 allowed me to directly comparison old and new methods，导致修改后的代码：

<html>
   <body onload="x=0" onkeydown="document.images[0].style.msTransform='rotate('+((x=++x%4)*90)+'deg)'">
   <img src="DSCF0353.jpg" height=900>
</html>

这使我可以直接引用度数，而不是从基于 Pi 的弧度转换。90 度增量很方便，但新方法（就像其他建议一样）也允许其他角度，就像众所周知的帽子一样。

行为的一个细微差别是，在 OLD 方法中，显示的图像左上角的物理位置是恒定的。在 NEW 方法中，以 0 度旋转显示时图像的 CENTER 位置成为图像的旋转中心。

另一个不同的方面是，在此之前，可旋转性要求图像应用某种格式（在这种情况下，将高度设置为 900）；该要求不再适用。

附录：说到定位，这让我得到了这个有用的答案：如何在 CSS 中应用多个转换？关于结合旋转和重新定位（“翻译”）。将rotate(r)和translate(x,y)一个接一个地放在一行中，用空格分隔。请注意，操作是按顺序执行的：

如果先平移，则图像在其原始方向上移动指定的量（“px”表示像素），然后围绕其中心的新位置旋转；

如果首先旋转，（如在引用的页面中）图像围绕其原始中心旋转，然后移动旋转图像的相对（旋转）坐标系中指定的量。

于 2013-01-11T05:22:33.137 回答
-1

使用专门为此目的的jQuery 旋转插件。

于 2013-01-10T05:45:24.803 回答