StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Thanks for the three responses I got. Sandeep's referring to the css3 <strong>rotate</strong> property seemed like the most direct solution, and I followed up on it to discover the most straightforward answer here: <a href="https://stackoverflow.com/questions/11026200/rotating-text-with-css3-html5">Rotating text with CSS3/HTML5</a> allowing me to directly compare old and new methods, leading to this revised code:</p> <pre><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> </code></pre> <p>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.</p> <p>One slight difference in the behavior is that, in the OLD method, the physical position of the upper left corner of the image <strong><em>as displayed</em></strong> 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.</p> <p>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.</p> <p>ADDENDUM: Speaking of positioning, that led me to this useful answer: <a href="https://stackoverflow.com/questions/10765755/multiple-css-transforms">How to apply multiple transforms in CSS?</a> about combining rotation and repositioning ("translate"). Put <strong>rotate(r)</strong> and <strong>translate(x,y)</strong> one after the other in a single line, separated by a <strong>space</strong>. Note that the operations are performed <em>in order</em>:</p> <blockquote> <p>If <strong>translate</strong> 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;</p> <p>If <strong>rotate</strong> is first, (as in the referenced page) the image is rotated about its original center, <em>then</em> shifted by the amount specified <em>in the relative (rotated) coordinate system of the rotated image.</em></p> </blockquote>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload