Linguistically speaking, a transform is a “change in form, appearance, or structure,” at least according to the folks over at Dictionary.com. When it comes to CSS, the Mozilla Developer Network describes a transform this way:
“The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.”
What exactly does this definition mean? In a nutshell, CSS transforms change an element so that it’s form and visual appearance is modified. There are four basic types of CSS transforms that modify an element in different ways: rotate, scale, skew, and translate. Matrix, another type of CSS transform, is an advanced type of transform that is beyond the scope of this post.
Transforms: Syntax
The syntax for applying a CSS transform to an element is the same regardless of the specific transform function you want to use. The transform property allows for multiple transform functions to be included in one line of code. The default value of the transform property is none.
No Transforms
transform: none;
One Transform
transform: <transform-function>;
Multiple Transforms
transform: <transform-function> <transform-function> <transform-function>;
Rotate
The rotate transform function behaves exactly as you expect it will and allows you to rotate an element clockwise from its current position. Counter clockwise rotations can be achieved by using negative values.
Syntax
The specific syntax for a rotation is as follows. Angles are expressed in the format (5deg) or (-5deg), for example.
transform: rotate(angle);
Example
All examples in this post will use the following HTML and CSS to demonstrate the original state of the element before the transformation function has been applied. Any additional sample code will only account for the transform itself.
<div class="box"><i class="fa fa-smile-o"></i> </div>
.box {
width: 3em;
height: 3em;
background: #ca0164;
color: #ffffff;
text-align: center;
}
.box .fa {
font-size: 2em;
line-height: 1.45em;
}
Example: Rotate 25 Degrees to the Right
.box {
transform: rotate(25deg);
}
Scale
The scale transform function does exactly what you’d think it might do and scales an element relative to its original size. The values specified within scale transforms are unitless and should be thought of as a multiplier.
Syntax
There are three different variations on the syntax for the scale transform function since an element can be scaled on the X axis, the Y axis, or on both axes.
X and Y axis Scale
In this format, if only valueX is specified, valueY is assumed to be equal to valueX and the element is therefore scaled proportionately.
transform: scale(valueX, valueY);
Just X axis Scale
transform: scaleX(valueX);
Just Y axis Scale
transform: scaleY(valueY);
Example: Shrink to half size
.box {
transform: scale(0.5);
}
Skew
The skew transform function shifts an element along the X and/or Y axis by an angle value.
Syntax
An element can be skewed along the X axis, Y axis, or along both axes, but there are only two valid syntax structures for this type of transform. You’d expect that there would be a compound format similar to that for the scale transform function to address the transform of the X and Y axes in the same function, but that particular structure is no longer in the CSS specification and should not be used.
Just X axis Skew
transform: skewX(angleX);
Just Y axis Skew
transform: skewY(angleY);
Example: Skew left
.box {
transform: skewX(25deg);
}
Translate
The translate function moves an element vertically and/or horizontally relative to its current position. Positive values will move the element right on the X axis or down on the Y axis. Conversely, negative values will move the element left on the X axis or up on the Y axis. Any generally accepted length value can be used (pixels, ems, etc.).
You might be wondering: Why would you use translate when you can use more established CSS standards for layout and formatting? In general, you should never use the translate function for basic layout needs. Instead, think of translate as a more efficient way to move an element’s placement in a transition or animation.
Syntax
The syntax for the translate transform is nearly identical to the syntax for the scale transform function and accounts for the ability to translate an element along the X axis, Y axis, or both axes.
X and Y axis translation
transform: translate(valueX, valueY);
Just X axis translation
transform: translateX(valueX);
Just Y axis translation
transform: translateY(valueY);
Example: Move Box to Bottom Right
.box {
transform: translate(3em, 3em);
}
Browser Support
CSS transforms are supported in all major browsers including Internet Explorer 9 and above. There are a handful of browser prefixes that are required for full cross-browser support (listed below).
It’s also important to note that 3d transforms are coming and can be used in a lot of browsers now, but they are only partially supported in IE10 and 11. Once Internet Explorer has more widespread support for 3d transforms, the universe of what is truly possible with CSS transforms will expand even further.
Prefix Requirements
- -ms-
- -webkit-