Despite sounding similar, CSS transformations (both 2D and 3D variants) are entirely different to CSS transitions. Think of it like this: transitions smooth the change from one state to another, while transformations are defining what the element will become. My own (admittedly childish) way of remembering it is like this:
Imagine a Transformer robot like Optimus Prime. He's a robot that becomes something else (transforms) over a period of time (the transition) into a truck.
In case that tangent muddied the waters further (or you don't have a clue who Optimus Prime is) let's just dig in. Let's add a 2D transition to the hover state of the navigation links on the AND THE WINNER ISN'T site:
nav ul li a:hover {
transform: scale(1.7);
}Now, in a modern browser, hovering over a link produces this effect:
We've told the browser that when this element is hovered over, we want the element to scale to 1.7 times its original value.
Now, if you're attempting to add this rule to an element in Safari, be aware that it requires the main element to be displayed as a block. For example:
nav ul li a {
height: 42px;
text-decoration: none;
text-transform: uppercase;
color: black;
text-shadow: 0 1px 0 hsla(0, 0%, 100%, 1.0);
font: 1.875em/42px 'BebasNeueRegular';
display: block;
}Otherwise nothing happens, which is, you know, rubbish.
There are two groups of CSS3 transforms available: 2D and 3D. 2D variants are far more widely implemented, browser wise, and certainly easier to write so let's look at those first. The CSS3 2D Transforms Module allows us to use the following transformations:
scale: used to scale an element (larger or smaller)translate: move an element on the screen (up, down, left, and right)rotate: rotate the element by a specified amount (defined in degrees)skew: used to skew an element with its X and Y co-ordinatesmatrix: allows you to move and shape transformations with pixel precision
Let's try each of these and see what we can achieve.
We've already looked at this transform above. However, besides the positive values we've already used, it's worth knowing that by using values below 1, we can shrink elements; the following will shrink the element to half its size:
transform: scale(0.5);
transform: translate(40px, 0px);
translate tells the browser to move the element by an amount, defined in either pixels or percentages. The syntax is applied first from the left to the right (40px here) and then from the top to the bottom (0px here so it stays in line with the other navigation elements). Positive values given within parentheses move the element right or down; negative values move it left or up. So using this declaration on our navigation hover state results in this—our link shifting 40 pixels to the right when hovered over:
transform: rotate(90deg);
rotate allows you to rotate an element. In this example, we've amended the hover link to rotate 90 degrees. In the browser, here's what happens:
The value in parentheses should always be in degrees (for example, 90deg). That doesn't stop you going crazy—you can make elements spin by specifying a value like the following:
transform: rotate(3600deg);
This will rotate the element 10 times in a complete circle. Practical uses for this particular value are few and far between but you know, if you ever find yourself designing websites for a windmill company it may come in handy!
If you've spent any time working in Photoshop, you'll have a good idea what skew will do. It allows an element to be skewed on either or both of its axes.
transform: skew(10deg, 2deg);
Setting this on the hover link produces the following effect on hover:
The first value is the skew applied to the X axis (in our example, 10deg), while the second (2deg) is for the Y axis. Omitting the second value means any value will be applied to the X axis (horizontal). For example:
transform: skew(10deg);
This is perfectly valid but will only apply skew to the X axis. Values should always be given in degrees. While positive values always apply clockwise, using negative values will rotate the element counter-clockwise.
So, on the subject of over-rated films. What's that? You want to know about the CSS3 matrix, not the film? Oh, okay…
The matrix transform syntax looks scary:
transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
It essentially allows you to combine a number of other transforms (scale, rotate, skew, and so on) into a single declaration. The above declaration results in the following effect in the browser:
Now, I like a challenge like the best of them (unless, you know, it's sitting through Moulin Rouge) but I'm sure we can agree that syntax is a bit testing. It gets worse when you look at the specification and realize that it involves mathematics knowledge to fully understand: http://www.w3.org/TR/css3-2d-transforms/#cssmatrix-interface.
I'm not a mathematician by any stretch of the imagination so when faced with the need to create a matrix based transformation, I cheat. If your mathematical skills are also found wanting, I'd suggest heading over to http://www.useragentman.com/matrix/.
The Matrix Construction Set website allows you to drag and drop the element exactly where you want it and then includes good ol' copy and paste code (including vendor-prefixes) for your CSS file.
Alongside the aforementioned transformations, you can use the transform-origin property to amend the point from which transforms are applied:
transform: rotate(45deg); transform-origin: 20% 20%;
Setting this on our navigation links results in the following when hovered over:
The transform-origin property comes in useful as by default, transformations are applied to the center of an element. This provides a handy means of offsetting it and can produce some great results.
Note
Full information on the transform-origin property can be found here: http://www.w3.org/TR/css3-2d-transforms/#transform-origin-property
That covers the essentials of 2D transforms. They are far more widely implemented in the browser landscape than their 3D brethren and when used sensibly, provide a light-weight means of providing visual flourishes to reward users with modern browsers.
Note
Read the full specification on CSS3 2D Transforms Module Level 3 here: http://www.w3.org/TR/css3-2d-transforms/