Emil Björklund - CSS Mastery, Third Edition

The specifications for transforms, transitions, and keyframe animations are still being worked on. Despite this, most of these features are pretty well supported across commonly used browsers, notable exceptions being Internet Explorer 8 and Opera Mini. IE9 only supports the 2D subset of transforms using the -ms- prefix, and does not support keyframe animations or transitions. Transforms, transitions and keyframe animations all require the -webkit- prefix to work in various versions of WebKit- and Blink-based browsers. The -moz- prefix is only needed if you need to cover old versions of Firefox.

CSS transforms allow you to shift the rendering of an element on the page by translating, rotating, skewing, or scaling it. In addition, you can add a third dimension into the mix! In this section, well start with the 2D transformations, and move on to 3D later. Figure gives an overview of what the 2D transforms do.

Figure 10-2. The different types of 2D transformations illustrated

In technical terms, transformations change the coordinate system of the element as it appears on the page. One way of looking at transformations is to view them as distortion fields. Any pixel that belongs to the rendering of the transformed element is caught in the distortion field and gets teleported to a new position or size on the page. The element still remains where it was originally positioned on the page, but the resulting image of the element is transformed.

Imagine that you have a 100100-pixel element with a class name of box showing on the page. The position of the element can be affected by margins, positioning, sizes of other elements in the flow of the page, and so forth. Regardless of how it ended up where it did, we can describe the position of the box by using coordinates within the viewportfor example, 200 pixels from the top of the page and 200 pixels from the left. This is the viewport coordinate system.

In the page, there is a 100100-pixel space reserved for the element as it normally renders. Now lets imagine we were to transform the element by rotating it 45 degrees:

Applying a transformation to an element creates what is known as a local coordinate systemfor the space where the element was originally placed. The local coordinate system is the distortion field, displacing the pixels of the element.

Since elements are represented as rectangles on the page, its perhaps easiest to think about what happens to the four points at the corners of the box. The Firefox developer tools have a nice visualization of this when inspecting an element. In the Rules panel of the inspector, hover over the transform rule to see the resulting transformation (see Figure ).

Figure 10-3. Visualizing a 45-degree transformation in Firefox developer tools. The original box and the transformed box are shown along with arrows showing the changed position of the corners.

The page still retains its 100100-pixel gap where the box used to be, but any point belonging to the box is now transformed by the distortion field.

It is important to understand this technial background when applying transformations to elements in addition to other properties that affect their place on the page. What happens when we apply margin-top: 20px to the transformed div? Does the corner pointing upward now end up 20 pixels from the top of the original position? No: the whole local coordinate system of anything belonging to the box is rotated, including the margin, as shown in Figure .

Figure 10-4. Rotating a box includes rotating its whole coordinate system, so the top margin is also rotated

Its also important to note that the rotated appearance in no way interferes with the layout of the rest of the page as it would appear without the transformation. If we rotate the box a full 90 degrees so that the top margin is visually poking out to the right, it doesnt push on any elements that may be sitting to the right of the box.