However, while 2D transforms are supported in all modern browsers, 3D transforms are currently only supported in Safari, Chrome, and Internet Explorer version 10. In this article, we will take a closer look at how to use 2D transforms.
How do Transforms Work?
At a high level, a transform is an effect that lets an element change its shape, size, and position. We will take a look at some examples to get a better idea of how these transforms work.
Transform Property
The transform property accepts for its value, one or more transform functions. These transform functions specify a transformation. Functions take the form of a function name, with a value inside of a set of parenthesis.
Browser Support
At the time of this writing, the transform property is not supported by any browser. However, vendor prefixes are currently supported.
Syntax
The transform property takes transform functions as its value. The default value is none.
translate() function
With the translate() function, the element moves from its current position to a new position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position. If you only want to translate along the X-axis, you can use the translateX() function. If you only want to translate along the Y-axis, use the translateY() function.
rotate() function
With the rotate() function, we can rotate an element clockwise or counter-clockwise at a given degree. A positive value rotates the element clockwise. A negative value rotates the element counter-clockwise.
scale() function
The scale() function increases or decreases the size of the target element depending on the parameters given for the width (X-axis) and the height (Y-axis). If you only want to scale on the X-axis, use the scaleX() function. If you only want to scale the on Y-axis, use the scaleY() function. The numeric value provided will scale it that number of times.
skew() function
The skew() function turns an element in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines. If you only want to skew on the X-axis, use the skewX() function. If you only want to skew on the Y-axis, use the skewY() function.
matrix() function
While it is unlikely that you will ever need to use the matrix function, underneath all these functions is the core of CSS transformations, which is based on the mathematical concept of a transformation matrix. Each of the functions we have covered so far can be represented by a matrix value. You can visit the W3C site for detailed information about the transformation matrix. In the following example, we will rotate a div element 30 degrees, using the matrix function.
transform-origin Property
The transform-origin property allows you to change the position on the transformed element. An element with a 2D transformed property can change the X-axis and Y-axis of the element. In other words, the transform-origin property sets an element’s base placement. For 3D transforms, it can change the Z-axis as well. The X-axis and Y-axis values can be supplied as left, center, right, [length], or [percentage]. Here is an example. In this previous example, you can compare the element that has only been rotated, vs an element that has been rotated and has had the transform-origin property applied. As you can see, the transform-origin has changed the position of the element on its X-axis as well as its Y-axis.
