Transform

Apply a 2D or 3D transformation to an element: rotate, scale, move, skew, etc.

Syntax
      transform: transform-functions | none ;

matrix(n,n,n,n,n,n) - Transformation, using a matrix of six values. matrix(2,1,1,7,350,50)
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) - 3D transformation, using a 4x4 matrix of 16 values.
perspective(n) - Perspective view for a 3D transformed element.
rotate(angle) - Rotation, the angle is specified in the parameter. rotate(400deg)
 rotateX(angle) - 3D rotation along the X-axis. rotateX(180deg)
 rotateY(angle) - 3D rotation along the Y-axis. rotateY(180deg)
 rotateZ(angle) - 3D rotation along the Z-axis. rotateZ(60deg)
rotate3d(x,y,z,angle) - Rotate the element around an arbitrary vector in 3D space; x, y and z
scale(x,y) - Scale transformation. scale(0.85, 1.5)
 scaleX(x) - Scale transformation by giving a value for the X-axis. scalex(0.85)
 scaleY(y) - Scale transformation by giving a value for the Y-axis. scaley(1.15)
 scaleZ(z) - 3D scale transformation by giving a value for the Z-axis.
scale3d(x,y,z) - 3D scale transformation.
translate(x,y) - Translation, move across and down. translate(-10px, 25px)
 translateX(x) - Translation, move across (X-axis). translatex(-10px)
 translateY(y) - Translation, move down (Y-axis). translatey(25px)
 translateZ(z) - 3D translation, move towards the viewer (Z-axis). translatez(25px)
translate3d(x,y,z) - 3D translation, across, down and towards the viewer.
skew(x-angle,y-angle) - Skew transformation along the X- and the Y-axis. skew(20deg, -15deg)
 skewX(angle) - Skew transformation along the X-axis. skewx(20deg)
 skewY(angle) - Skew transformation along the Y-axis. skewy(20deg)
none - No transformation.

Negative values will move in the opposite direction.
Rotation values can be greater than 360 deg.
Multiple functions can be applied as part of the same CSS rule, separated with spaces.

Try it:

For most transitions a timing of between 0.5 and 2 seconds will give the best results.
Reloading the page will return the text to its starting position.

(CSS 3) Browser Support: IE 10, Firefox. Use the equivalent -webkit-transform for Safari and Chrome, -ms-transform for IE 9 and -moz-transform for old Firefox versions.

“Don't spend time beating on a wall, hoping to transform it into a door” ~ Coco Chanel

Related:

Mozilla Transform reference page
transform-origin - Change the position of transformed elements.
transition - Shorthand to set transition- properties.
CSS Transform examples - Rich Bradshaw


© Copyright SS64.com 1999-2014
Some rights reserved