1

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)?

Anshu
  • 616
  • 7
  • 19
Ron Obvious
  • 21
  • 1
  • 1
  • 4
  • 2
    ie10 recognizes CSS3 properties. So u can use rotate css property to rotate elements. – Sandeep Jan 10 '13 at 05:29
  • see dis http://stackoverflow.com/questions/7117445/html5-rotating-an-image-with-canvas – Anshu Jan 10 '13 at 05:45
  • @Sandeep IE9 supports CSS3 transforms already but Microsoft dropped the use of legacy filters in IE10. – Licson Jan 12 '13 at 16:46

2 Answers2

1

Thanks for the three responses I got. Sandeep's referring to the css3 rotate property seemed like the most direct solution, and I followed up on it to discover the most straightforward answer here: Rotating text with CSS3/HTML5 allowing me to directly compare old and new methods, leading to this revised code:

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

One slight difference in the behavior is that, in the OLD method, the physical position of the upper left corner of the image as displayed was 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.

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.

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:

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.

Community
  • 1
  • 1
Ron Obvious
  • 21
  • 1
  • 1
  • 4
0

Use jQuery rotate plugin which is intended exactly for that.

Roy
  • 1,307
  • 1
  • 13
  • 29