如何在 Windows 8/IE10 中将 HTML/Javascript 中的图像或对象旋转 90°？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14251352/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to 90°-rotate an image or object in HTML/Javascript in Windows 8/IE10?
提问by Ron Obvious
Taking the following code:
采取以下代码：
<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>
Why is it that this, which makes a displayed image cycle 90° rotations on each keystroke in Windows 7/IE9, would NOT do so in Windows 8/IE10 (the image does not rotate)? What code WOULD produce the rotations in Windows 8/IE10 (SIMILAR, if possible, to above)?
为什么在 Windows 7/IE9 中每次击键时显示的图像循环 90° 旋转，为什么在 Windows 8/IE10 中不会这样做（图像不旋转）？什么代码会在 Windows 8/IE10 中产生旋转（类似，如果可能，到上面）？
回答by Ron Obvious
Thanks for the three responses I got. Sandeep's referring to the css3 rotateproperty seemed like the most direct solution, and I followed up on it to discover the most straightforward answer here: Rotating text with CSS3/HTML5allowing me to directly compare old and new methods, leading to this revised code:
感谢我得到的三个回复。Sandeep 提到的 css3旋转属性似乎是最直接的解决方案，我跟进了它，在这里找到了最直接的答案：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>
This allows me to refer to degrees directly, rather than converting from Pi-based Radians. And 90-degree increments are convenient, but the new method (like the other suggestions) allows other angles as well, at the drop of a proverbial hat.
这允许我直接引用度数，而不是从基于 Pi 的弧度转换。90 度增量很方便，但新方法（与其他建议一样）也允许其他角度，这是众所周知的。
One slight difference in the behavior is that, in the OLD method, the physical position of the upper left corner of the image as displayedwas constant; in the NEW method, the position of the CENTER of the image when displayed at 0 degrees rotation becomes the center of rotation of the image.
行为的一个细微差别是，在 OLD 方法中，显示的图像左上角的物理位置是恒定的；在 NEW 方法中，图像以 0 度旋转显示时的 CENTER 位置成为图像的旋转中心。
Another different aspect is that, before, rotatability required that the image have some sort of formatting applied to it (in this case, setting height to 900); that requirement no longer applies.
另一个不同的方面是，以前，可旋转性要求图像应用某种格式（在这种情况下，将高度设置为 900）；该要求不再适用。
ADDENDUM: Speaking of positioning, that led me to this useful answer: How to apply multiple transforms in CSS?about combining rotation and repositioning ("translate"). Put rotate(r)and translate(x,y)one after the other in a single line, separated by a space. Note that the operations are performed in order:
附录：说到定位，这让我得到了这个有用的答案：如何在 CSS 中应用多个变换？关于组合旋转和重新定位（“平移”）。将rotate(r)和translate(x,y)一个接一个放在一行中，用空格分隔。请注意，这些操作是按顺序执行的：
If translateis 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 rotateis first, (as in the referenced page) the image is rotated about its original center, thenshifted by the amount specified in the relative (rotated) coordinate system of the rotated image.
如果首先平移，则图像在其原始方向上移动指定的量（像素为“px”），然后围绕其中心的新位置旋转；
如果首先旋转，（如在参考页面中）图像围绕其原始中心旋转，然后按旋转图像的相对（旋转）坐标系中指定的量移动。
回答by Roy
Use jQuery rotate pluginwhich is intended exactly for that.
使用正是为此而设计的jQuery 旋转插件。
