CSS3 Transforms

On these pages we saw how to animate with transitions and keyframes.

For even more fun with animations you no doubt want stuff rotating, scaling and generally ‘transforming’ and CSS3 obliges with the transform property.

For a heads up take a look at the Transform Playground to see what transform is capable off.

Using Transform

To use a transform property such as rotate would require the following. Here we have created a <div> of class ‘rotate’ to rotate it by 90 degrees.

div.rotate{
   transform:rotate(90deg);
   -ms-transform:rotate(90deg); /* IE 9 */
   -moz-transform:rotate(90deg); /* Firefox */
   -webkit-transform:rotate(90deg); /* Safari and Chrome */
   -o-transform:rotate(90deg); /* Opera */
}

CodePen Demo

Leave a Comment