Transformations
Using transformations you can skew, rotate, stretch, and squash
elements in any of up to three dimensions (yes, 3D is supported, but only
in WebKit-based browsers for now). This makes it easy to create great
effects by stepping out of the uniform rectangular layout of <div>
and other elements, because now they
can be shown at a variety of angles and in many different forms.
To perform a transformation, use the transform
property (which unfortunately has
browser-specific prefixes for Mozilla, WebKit, Opera, and Microsoft
browsers, so once again youâll need to refer to the website http://caniuse.com).
You can apply various properties to the transform
property, starting with the value
none
, which resets an object to a
nontransformed state:
transform:none;
You can supply a variety of one or more of the following functions
to the transform
property:
matrix
Transforms an object by applying a matrix of values to it.
translate
Moves an elementâs origin.
scale
Scales an object.
rotate
Rotates an object.
skew
Skews an object.
There are also single versions of many of these functions, such as
translateX
, scaleY
, and so on.
Note
WebKit-based browsers (such as Apple Safari, iOS, Google Chrome, and Android) support 3D transformations as well, but I will not cover those here because IE, Opera, and Mozilla-based browsers do not yet provide this featureâhopefully these browsers will catch up soon, though.
So, for example, to rotate an element clockwise by 45 degrees, you could apply this declaration ...
Get Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.