CSS transforms have gained such popularity that it's rare not to see some sort of transformation in a website nowadays—from button shapes and animations to layouts.
Let's dig in.
The transform CSS property allows us to scale, rotate, skew, and translate elements in 2D and 3D spaces, and it looks like this:
transform: translate(-10px, 10%);
This property supports the following values: scale(), skewX() and skewY(), translate(), rotate(), matrix(), and perspective().
Note that X-axis equals horizontal and Y-axis equals vertical.
Tip
An easy way to remember which axis is which is by saying this: "x is a cross so the x-axis is across". http://tiny.cc/xy-axis
The scale() function scales an element. It's also the shorthand for scaleX() and scaleY() functions. It accepts a numeric value without a unit. The numeric value represents the proportion in which the element will be scaled. For example, 2 means that the element will be scaled to twice its size. Negative values are valid.
The skew() function tilts the element. If a single value is declared, then it will only tilt the element on the x axis. If two values are declared, then the element is tilted on both the x and y axes. The skew() function accepts a numeric value followed by the deg, grad, rad, or turn units. However, the deg unit is the most commonly used unit. Negative values are valid.
The translate() function alters the location of an element. If a single value is declared, then it will only translate the element on the X-axis. If two values are declared, then the element is translated in both the X and Y-axis. Negative values are valid.
The rotate() function rotates an element around a fixed point in a 2D space. It accepts a numeric value followed by the deg, grad, rad, or turn units. The deg unit is the most common though. Negative values are valid.
The matrix() function is shorthand for all transformation values since they can be combined here. Granted the complexity of the matrix() function, this requires a solid understanding of math.
This value gives a 3D perspective to the element; once the perspective is set, we can then use any of the other values. The element in question will react in a 3D plane. It accepts a numeric value with a length unit.
The explanation of the advanced mathematics of the matrix() function are out of scope of this book. However, for very detailed explanations, you can refer to either of these two articles:
- Understanding the CSS Transforms Matrix by Tiffany Brown at http://tiny.cc/css-matrix-1
- The CSS3 matrix() Transform for the Mathematically Challenged by Zoltan Hawryluk at http://tiny.cc/css-matrix-2
CSS:
/*Scale the same value in both X an Y-axis*/
.element { transform: scale(1.1); }
/*Scale different values for X and Y-axis*/
.element { transform: scale(1.1, 1.5); }
/*Tilt the element on X-axis only*/
.element { transform: skew(10deg); }
/*Tilt the element on both X and Y-axis*/
.element { transform: skew(10deg, -20deg); }
/*Move the element 10px to the right*/
.element { transform: translate(10px); }
/*Move the element 10px to the right and 10% down*/
.element { transform: translate(-10px, 10%); }
/*Rotate in a 2D plane*/
.element { transform: rotate(10deg); }
/*Matrix*/
.element { transform: matrix(2, 2, 1, 2, 0, 0); }
/*Add perspective to the element to make it rotate in a 3D plane*/
.element { transform: perspective(100px) rotateX(40deg); }The
transform-origin CSS property allows us to change the point of origin of the transformed element, and it looks like this:
transform-origin: 50px;
The
transform-origin property only works if the transform property is declared.
2D transformations can affect the x and y axes. 3D transformations can change these two as well as the z axis.
For a 2D transformation, up to two values can be declared; the first one is the X axis (horizontal) and the second the Y axis (vertical).
3D transformations can take up to three values that represent the X, Y, and Z axes.
The keywords that are accepted in this property are: top, right, bottom, left, and center.
CSS:
/*Single value affects both X and Y-axis*/
.element {
transform: scale(2, 4);
transform-origin: 50px;
}
/*Two values one for each axis*/
.element {
transform: scale(2, 4);
transform-origin: 50px -100px;
}
/*Keyword value*/
.element {
transform: scale(2, 4);
transform-origin: bottom;
}
/*Length and keyword values*/
.element {
transform: scale(2, 4);
transform-origin: 50px bottom;
}
/*Both keyword values*/
.element {
transform: scale(2, 4);
transform-origin: right bottom;
}The
transform-style CSS property defines whether an element is positioned in a 3D space or 2D space (flat), and it looks like this:
transform-style: preserve-3d;
This property takes only two values: flat and preserve-3d.
When the preserve-3d property is applied, the elements' stack on the z axis can be altered via the translate() function, thus the elements can appear in different planes regardless of the order in which they appear in the source HTML.
When the flat property is applied, the elements obey the order in which they appear in the source HTML.
CSS:
/*Perspective*/
.parent-container {
transform-style: preserve-3d;
perspective: 500px;
}
.element-1 {
transform: translateZ(1px) rotateX(60deg);
}
.element-2 {
transform: translateZ(-2px);
}CSS transitions allow us to have very granular control over our animations.
Let's take a look at these properties.
The transition CSS property is the shorthand for all transition properties: transition-delay, transition-duration, transition-property, and transition-timing-function. It looks like this:
transition: width 400ms ease-out 1s;
This property lets us define the transition between two states of an element via the :hover or :active pseudo-classes.
One thing to consider is that the order in which these properties appear doesn't matter. However, since transition-delay and transition-duration use the same value unit, transition-delay will always be considered first, followed by transition-duration.
CSS:
/*Shorthand with all properties in a single declaration*/
.element {
width: 100px;
/*property - duration - timing function - delay*/
transition: width 400ms ease-out 1s;
}
/*Longhand. Each property is declared separately*/
.element {
transition-property: width;
transition-duration: 400ms;
transition-timing-function: ease-out;
transition-delay: 1s;
}
.element:hover {
width: 300px;
}The
transition-delay CSS property allows us to set a timer. When the timer reaches zero, the transition begins. It looks like this:
transition-delay: 1s;
The
transition-duration CSS property allows us to define how long a transition should take from start to end. This is also called a cycle, and it looks like this:
transition-duration: 400ms;
The
transition-property CSS property specifies which CSS property or properties will be transitioned.
Not all properties are animatable though. The W3C has a nice list of animatable CSS properties, which can be found at http://tiny.cc/w3c-animatable-css-props
The transition-property CSS property accepts the following values:
CSS:
.element {
transition-property: width;
}The
transition-timing-function CSS property defines how an animation's speed should progress throughout its cycles.
Both the transition-timing-function and animation-timing-function properties accept the same five predefined values, which are also known as easing functions for the Bézier curve: ease, ease-in, ease-out, ease-in-out, and linear.
Refer to the animation-timing-function section for a detailed explanation of all the values.
CSS:
.element {
transition-timing-function: ease-out;
}