CSS Transforms Cheatsheet

2D Transform Functions

These occur along a cartesian plane with an x & y axis.

X-axis: horizontal / width.
Y-axis: vertical / height.


Scale Function

Used to transform the size of elements.

How to Use:


transform: scale(x);      // width and height are multiplied by x.

transform: scale(x,y);    // width is multiplied by x. height is multiplied by y.

transform: scaleX(x);     // width is multiplied by x.

transform: scaleY(x);     // height is multiplied by x.

Why Use Scale Function When You Can Change Width & Height of Element?
  • Using transform does not affect flow of document. In other words, an elements that has been scaled up, won’t affect position of other elements.
  • Scaling an element not only affects element dimensions, but other styles applied to the elements, such as padding, margin, border-width and box-shadow.

Translate Function

Used to move elements.

How to Use:


transform: translate(x);      // move element by x on x-axis.

transform: translate(x,y);    // move element by x on x-axis and by y on y-axis.

transform: translateX(x);     // if x is positive, element moves to right. if negative moves to left.

transform: translateY(x);     // if x is positive, element moves down. if negative moves up.

Tips:
  • Can use a variety of units (ie. pixels / percentage / em)
  • Reference is element itself, not its parent element.

Rotate Function

Used to rotate elements.

How to Use:

transform: rotate(x);      // rotate element by x degrees.

transform: rotateX(x);     // rotate element on x-axis.

transform: rotateY(x);     // rotate element on y-axis.

Tips:
  • Note that when rotating an element on one axis only, it can get confusing because the element is being rotated in 2D space – the effect is flat, so element will appear squeezed.
  • When you are rotating an element, you are also rotating the axis.


Skew Function

Used to skew elements.

How to Use:


transform: skew(x);      // skew element by angle of x.

transform: skewX(x);     // skew element by angle of x on x-axis.

transform: skewY(x);     // skew element by angle of x on y-axis.


Why Use Transform?

There is an important difference when it comes to performance – transformation is hardware accelerated. Because the browser expects changes to happen to an element, performance is better.


Transform Origin

By default, transform origin is always the center of the element.


transform-origin: 50% 50%; 
// or
transform-origin: center center;

Check out this codepen for a sense of how altering the transform-origin can affect the final result.


Multiple Transformations

  • Separate different transformations with a space, not a comma transform: translate(x) rotate(45deg);
  • Note that the order of your transformations will effect the final result. This is important to keep in mind when you are applying a rotate transform to an element (as rotate alters the axis)

Transformation in Action

Hover over button & watch it transform