采用以下代码:
<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 中产生旋转(如果可能的话,与上面类似)?
最佳答案
感谢您收到的三个回复。 Sandeep 提到的 css3 rotate 属性似乎是最直接的解决方案,我对其进行了跟踪,发现了最直接的答案:Rotating text with CSS3/HTML5让我可以直接比较新旧方法,从而得到修改后的代码:
<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 度增量很方便,但新方法(与其他建议一样)也允许其他 Angular ,毫不费力。
行为上的一个细微差别是,在 OLD 方法中,图像左上角的物理位置显示是恒定的;在NEW方法中,以0度旋转显示时图像的CENTER位置成为图像的旋转中心。
另一个不同的方面是,以前,可旋转性要求图像应用某种格式(在本例中,将高度设置为 900);该要求不再适用。
附录:说到定位,这让我得到了这个有用的答案:How to apply multiple transforms in CSS?关于组合旋转和重新定位(“平移”)。将 rotate(r) 和 translate(x,y) 依次放在一行中,并用空格分隔。请注意,操作是按顺序执行的:
If translate is first, the image is shifted by the specified amount ("px" for pixels) in its original orientation, then rotated about the new position of its center;
If rotate is first, (as in the referenced page) the image is rotated about its original center, then shifted by the amount specified in the relative (rotated) coordinate system of the rotated image.
关于javascript - 如何在 Windows 8/IE10 中将 HTML/Javascript 中的图像或对象旋转 90°?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14251352/