javascript - 如何在 Windows 8/IE10 中将 HTML/Javascript 中的图像或对象旋转 90°?

标签 javascript rotation

采用以下代码:

<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/

相关文章:

javascript - 错误 : [filter:notarray] Expected array but received: 0

javascript - 如何从外部文件读取数据并将其存储为变量 javascript Three.js

javascript - Highcharts 自定义符号图例

c++ - std::rotate 参数不正确?

css - 围绕任意点旋转 (svg, css),无需 transform-origin

javascript - 使用jquery点击多次旋转图像

javascript - 旋转 div 时获取 CSS 左侧和顶部

javascript - 存储客户端/服务器字符串过滤指令以供实时使用

javascript - jquery - 旋转一次

javascript - 使用过滤器在 Angularjs 中执行搜索后清除列表?