Try This!

CSS3 Transformations allow you to apply rotations, scales, skews and translations to any DOM element with simple styles.

pre {
transform: rotate(-1deg) skewX(5deg);
}

Transitions allow you to specify how the style on a DOM element will animate between transformed states. For example, you can animate the background color when the user hovers over an element. Hover over this code!

pre {
  transition: all 1s ease-inout;
}

pre:hover {
  background-color: #F2F5FE;
  border-color: black;
}

Applying 3D transforms is simple too. Just specify the transformation in 3d co-ordinates and you are ready. Hover over this code!

div {
  transform: rotate3d(1,1,0, 45deg);
}

Demos

In the Wild

Resources

• CSS3 Spec status A list of the current status of the CSS3 specifications.
• W3C Spec: CSS3 Selectors This W3C specification defines the new selectors available to developers.
• W3C Draft CSS3 2d Transform module This W3C specification defines how rotations, transformations, skews and scaling should be applied to DOM elements in 2 dimensions.
• W3C Draft CSS3 3d Transform module This W3C specification defines how 3d transformations should be applied to DOM elements.
• W3C Draft CSS3 Transition Module This W3C specification defines how properties should be animated between states.
• W3C Draft CSS3 Animation Module This W3C specification defines the new animation properties available.