CSS Transform Functions
Published Aug 8, 2021Updated Sep 9, 2021
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 by a specified angle.
- rotateX()
- Rotates an element around the x-axis in 3D space.
- rotateZ()
- Rotates an element around the z-axis by a specified angle.
- scale()
- Changes the size of an element to make it larger or smaller.
- scale3d()
- Resizes an element in three-dimensional space by scaling along the x-axis, y-axis, and z-axis independently.
- scaleX()
- Applies a scaling transformation to an element along the X-axis.
- scaleY()
- Resizes an element along the y-axis.
- scaleZ()
- Resizes an element along the z-axis in 3D space
- skew()
- Tilts an element on the x-axis or both the x and y axes on a 2D plane.
- skewX()
- Skews an element horizontally by a specified angle using the CSS transform property.
- 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.
- translate3d()
- Moves an element in 3D space along the X, Y, and Z axes.
- translateX()
- Moves an element horizontally along the X-axis.
- translateY()
- Moves an element vertically along the Y-axis.
- translateZ()
- Moves an element along the Z-axis in 3D space.
Learn CSS on Codecademy
- Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
- Includes 34 Courses
- With Professional Certification
- Beginner Friendly.115 hours
- In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
- Beginner Friendly.6 hours