CSS3 Transforms and Transitions

The CSS3 transform property lets you translate, rotate, scale, or skew any element on the page. The value of the transform property is one or more transform functions, separated by spaces, which is applied in the order they are provided.

1. Translation

Translation functions allow you to move elements left, right, up, or down. When you employ a translation function, you are moving elements without impacting the flow of the document.

transform: translate(45px,-45px);

The translate(x,y) function moves an element by x from the left, and y from the top. If you only want to move an element vertically or horizontally, you can use the translatex or translatey functions.

2. Scaling

The scale(x,y) function scales an element by the defined factors horizontally and vertically, respectively. If only one value is provided, it will be used for both the x and y scaling. For example, scale(1) would leave the element the same size, scale(2) would double its proportions, scale(0.5) would halve them, and so on.

As with translate, you can also use the scalex(x) or scaley(y) functions. These functions will scale only the horizontal dimensions, or only the vertical dimensions.

A scaled element will grow outwards from or shrink inwards towards its center. The element’s center will stay in the same place as its dimensions change.

The scaling, like translation, has no impact on the document flow. This means that if you scale inline text, text around it won’t reflow to accommodate it.

3. Rotation

The rotate() function rotates an element around the point of origin by a specified angle value.  Generally, angles are declared in degrees (deg), with positive degrees moving clockwise and negative moving counter-clockwise.

4. Skew

The skew(x,y) function specifies a skew along the X and Y axes. If the second parameter is omitted, the skew will only occur on the X axis. As with translate and scale, there are axis-specific versions of the skew transform: skewx() and skewy().

5. Transitions

Transitions allow the values of CSS properties to change over time, essentially providing simple animations. For example, if a link changes color on hover, you can have it gradually fade from one color to the other, instead of a sudden change. Similarly, you can animate any of the transforms, so that your pages feel more dynamic.

CSS transitions are declared along with the regular styles on an element. Whenever the target properties change, the browser will apply the transition.

The transition-property lists the CSS properties of the element that should be transitioned. Properties that can be made to transition include background, border, and box model properties. You can provide any number of CSS properties to the transition-property declaration, separated by commas. Alternatively, you can use the keyword all to indicate that every supported property should be animated.

The transition-duration property sets how long the transition will take. You can specify this either in seconds (s) or milliseconds (ms).

The transition-delay property introduces a delay before the animation begins. Normally, a transition begins immediately, so the default is 0. Include the number of milliseconds (ms) or seconds (s) to delay the transition.