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 */ }