Abakada ~ Back to Basics   CSS Attributes

---

CSS transforms provide functions for modifying the coordinate space of the CSS visual formatting model, thus allowing authors to move, scale, rotate, and skew elements on a web page. This section describes the specific transform effects currently supported.

Transform	Value	Function
matrix( )	number(6)	Defines a 2D transformation matrix.
matrix3d( )	number	Defines a 3D transformation matrix.
perspective( )	degree	Sets the distance between the user and the z=0 plane.
rotate( )	degree	Rotates an element around a fixed point on the 2D plane.
rotate3d( )	degree	Rotates an element around a fixed axis in 3D space.
rotateX( )	degree	Rotates an element around its horizontal axis.
rotateY( )	degree	Rotates an element around its vertical axis.
rotateZ( )	degree	Rotates an element around its Z-axis.
scale( )	number	Scales an element up or down on the 2D plane.
scale3d( )	number	Scales an element up or down in 3D space.
scaleX( )	number	Increases or decreases the width of an element.
scaleY( )	number	Increases or decreases the height of an element.
scaleZ( )	number	Scales an element up or down along the z-axis.
skew( )	degree (2)	Skews an element along the X and Y axis.
skewX( )	degree	Skews an element in the horizontal direction.
skewY( )	degree	Skews an element in the vertical direction.
translate( )	length (2)	Moves an element from on the 2D plane.
translate3d( )	length (2)	Moves an element in 3D space.
translateX( )	length (2)	Moves an element horizontally.
translateY( )	length (2)	Moves an element vertically.
translateZ( )	length (2)	Moves an element along the z-axis.

Understanding and Using CSS Transforms, CSS Animation Properties, CSS Filter Functions, CSS Transition Properties