Transform Functions

We can transform any HTML element using the transform property combined with CSS functions that scale, rotate, and even distort.

These functions apply both 2D and 3D transformations to element.

For example:

.shifted {
transform: translate(0px, 100px);
}

Transform Functions

rotate()
Rotates an element around a fixed point in a 2D space.
scale()
Changes the size of an element to make it larger or smaller.
skew()
Tilts an element on the x-axis or both the x and y axes on a 2D plane.
transform
Allows us to rotate, scale, skew or translate an element.
transform-origin
Sets the origin of an element's tranformation.
transform-style
Specifies if an element's children are positioned in 3D space or flattened.
translate()
Translates an element along the X and/or Y axes.
translateX()
Moves an element horizontally along the X-axis.
translateY()
Moves an element vertically along the Y-axis.
Edit this page on GitHub

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your feedback form.

Learn CSS on Codecademy

Edit this page on GitHub

Contributors