Webistrate - Draw Your Own Conclusions

CSS3: Rotating DOM Elements

Posted by Jamie Munro | March 5, 2012 | Tags:

Share

As more and more browsers support HTML5 and more importantly CSS3, it begins to allow us much more freedom using standard text without the need of images.  Not only does this speed up page load times, it also lowers bandwidth costs as well.  Using CSS3, many standard DOM (Document Object Model) objects can easily be rotated, such as: images, text, block elements, etc…

To begin, some basic HTML is required before we can apply the CSS code to it.  In the example below, I will demonstrate creating a menu with the word menu being rotated:

<div id="content">
Some content goes here in the middle…
<div id="menu">
Menu
</div>
</div>

Next, the CSS must be added to rotate the word menu so that it will appear vertically:

#menu {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}

With a bit more CSS, the following example can be produced without the need of a single issue:

Summary

Using some new CSS3, rotating text or images or many other DOM elements is now extremely simple!

Share


Related Posts

One Response to “CSS3: Rotating DOM Elements”

  1. [...] we saw in some previous CSS3 examples (CSS3: Rotating DOM Elements or CSS3: Creating a Transparent Background), our CSS is unfortunately more complicated because we [...]

Leave a Reply

You must be logged in to post a comment.

Buy one of my books