A Subtle CSS Rotation to Delight Users Using CSS Transforms and the :hover Psuedo Selector
First lets look at the markup:
<div class="wrapper"> <div class="rotator"></div></div>
There are two DIV elements, a wrapper and the actual element that will be rotated. The inner DIV will contain your content, Christian's right-hand navigation and logo for example. I am going to just make mine red and give it some shape to keep it simple.
Now for the CSS. The .wrapper rule applies a perspective to the wrapping element. This is important for 3D animations because it specifies how far from view the element is placed. This value is in pixels. The actually 3D effect will not be applied to this element though, it actually applies to the child elements. The lower this value to more profound the rotation angle will appear to the viewer. A higher value causes the rotation to appear almost flat.
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
The actual .rotator element, our content, has a couple of special rules applied, transition and transform. The transition rule specifies how long the change or transition from one rule's values to another rule's value will take, 1 second for our demo. In this example it is also specifying it will be applied to any transforms.
Next the transform is applied. In the normal state our content will be rotated 15 degrees backward, giving it a slight back tilted to the left appearance. When the user mouses or hovers over the element it will rotate to 0 degrees or a flat viewing angle. In case you are wondering in older browsers that do not support transforms the rotated elements should always appear flat.
I created a jsFiddle so you can play with my example code, http://jsfiddle.net/docluv/bVT2x/.