CSS Transforms: The Basics

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>;


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.


The specific syntax for a rotation is as follows. Angles are expressed in the format (5deg) or (-5deg), for example.

transform: rotate(angle);


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>
.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);


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.


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);


The skew transform function shifts  an element along the X and/or Y axis by an angle value.


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);


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.


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-

Leave a Reply

Your email address will not be published. Required fields are marked *