CSS3 transforms allow web developers to take just about any element in an HTML document, and rotate, translate, skew, and scale it, all while not changing its effect on the page layout. CSS3 provides both 2D and 3D transforms.
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.
transform: none|transform-functions
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.