How to Rotate an Image in XHTML

Save

All images included in an XHTML Web page document are horizontally aligned with the top and bottom edges of the browser window in which they are viewed by default. If you want to change this behavior and display your images using an alternate orientation, all you have to do is apply a few Cascading Style Sheet rules to the image you want to rotate. Once you understand how to configure these rules to work within the limitations of different browsers, rotating an image in an XHTML document becomes a quick task.

  • Open in an editing program the XHTML Web page containing the image you want to rotate. You can use either a visual design tool (e.g., Adobe Dreamweaver or Microsoft FrontPage) or a text editor (e.g., Notepad, Wordpad).

  • Single-click the image you want to rotate and then switch your design program into its "Code," "HTML" or "Source" mode to view the XHTML code that controls the structure of the page. If you use a text editing program, locate the line that contains your image code instead. In either case, the code for your image should resemble the following:

    <img src="file_name.jpg" />

  • Insert a space after the second quotation mark character and then insert a blank style parameter, so that your image tag resembles the following:

    <img src="file_name.jpg" style="" />

  • Insert five specialized CSS style rules in between the two quotation mark characters associated with the style parameter, so that your image tag resembles the following:

    <img src="file_name.jpg" style="display:block; rotation:90deg; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);" />

    The "90deg" and "rotation=1" values rotate the image clockwise by 90 degrees. If you need to rotate the image 180 degrees, enter "180deg" and "rotation=2" for the corresponding parameters. To rotate an image 270 degrees, enter "270deg" and "rotation=3" for the corresponding parameters.

  • Click "File" in the top menu bar and select "Save" to confirm your changes.

References

Promoted By Zergnet

Comments

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!