Web Platform CSS

Transforms

Transforms are often used to animate DOM elements. They allow you to position, zoom, rotate and skew most elements. You can try out these examples in a Codepen.

The transform property takes the general form:

.info {
  transform: function(parameters);
}

Where:

  • function is the name of the transformation (eg. translate), scale, rotate), skew).
  • parameters are comma-separated list of parameters the function expects.

For example:

/* Move by 100px on the x-axis, -50% on the y-axis */
transform: translate(100px, -50%);

/* Double width and triple height */
transform: scale(2,3);

/* Rotate by 30 degrees */
transform: rotate(30deg);

Performance of transforms is high (thus why it's a good fit for animation and CSS transitions), because it uses your computer's graphics processing power. One side effect is that elements can sometimes be pixelated. This is particularly noticeable when using scale() on text.

Translate

Translate moves an element around. translate() has the related functions translate3d(), translateX(), translateY(), translateZ(). As you might expect, the translateX/Y/Z functions allow you to control just one axis of movement:

/* Move element horizontally by its width */
transform: translateX(100%);

translate3d() positions in 3D space:

/* The three parameters are for x,y and z respectively. */
transform: translate3d(100px, -50%, 100px);

Rotate

rotate() has the related functions rotate3d(), rotateX(), rotateY(), rotateZ(). Each of the X/Y/Z variations allow you to rotate on a single axis.

/* Rotate backwards by 80 degrees */
transform: rotate(-80deg);

/* Rotate 80 degrees on Y axis */
transform: rotateY(80deg);

rotate3d() rotates with x, y, z and angle. X, y and z are given as vectors, with 0 being no movement, 1 being 100%.

/* Rotate 80deg, with vectors 0.5 on x and y and nothing on z */
transform: rotate3d(0.5, 0.5, 0, 80deg);

Note that setting perspective) can be important for 3D effects to be shown properly.

Scaling

Scaling allow zooming in and out of an element. Along with scale(), there are scale3d(), scaleX(), scaleY(), scaleZ(). 

/* Scale x and y by 200% */
transform: scale(2);

/* Scale horizontal by 50% (halving it) and vertical by 200% (doubling) */
transform: scale(0.5, 2);

Transform origin

By default, the origin for transforms will be the center of the element. But you can also rotate around an arbitrary point using transform-origin:

/* Transform around top left corner */
transform-origin: top left;

/* Transform with an offset of 10px horizontal, 20px vertical */
transform-origin: 10px 20px;

This is then combined with the transform you want, eg:

/* Rotate by 30 deg, with an origin 2x widths to the left */ 
transform-origin: -200%;
transform: rotate(10deg);

Combining

Multiple transforms can be combined by separating them with a space:

transform: rotate(-10deg) scale(2);

Tutorials

Read more