A Subtle CSS Rotation to Delight Users Using CSS Transforms and the :hover Psuedo Selector
By now you should know that I am constantly on the lookout for cool and bad features implemented by web sites all the time. Last week I was reading some posts on Christian Hielman's blog. As I passed my mouse over the navigation on the right I noticed the entire panel rotated to a flat position. It was subtle, but a nice little interactive feature. I have done enough CSS3 at this point to know how he pulls off the rotation, but I have not shared it with you. It is a very simple CSS3 rule application and requires absolutely no JavaScript or special HTML.
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.
.wrapper {
perspective: 800px;
}
.rotator {
position: relative;
top: 40px;
transform: rotateY(-15deg);
transition: transform 1s;
height: 300px;
width: 200px;
background-color: #c30000;
}
.rotator:hover {
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.
This is a simple example of how to apply CSS transitions and transforms to make a subtle, but engaging effect in your web applications. No special JavaScript or markup is required and is supported by all modern browsers with safe fallbacks so feel confident you can use it without consequences.
I created a jsFiddle so you can play with my example code, http://jsfiddle.net/docluv/bVT2x/.
