Transform Functions
Anonymous contributor
Anonymous contributor3077 total contributions
Anonymous contributor
Published Aug 8, 2021Updated Sep 9, 2021
Contribute to Docs
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
- Rotates, scales, skews, or translates an element.
- transform-origin
- Sets the origin of an element's transformation.
- 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.
All contributors
- Anonymous contributorAnonymous contributor3077 total contributions
- christian.dinh2481 total contributions
- Anonymous contributor
- christian.dinh
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.