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

      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.

To apply the transformation gradually, include a transition rule.
To apply the transformation immediately when the page loads, don't include any transition.

To flip text upside-down use transform: rotate(180deg); (an alternative is flipping text upside down using Unicode)

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


Mozilla Transform reference page
transform-origin - Change the position of transformed elements.
transition - Shorthand to set transition- properties.
top, bottom, left, right - Set the initial position of an element.
CSS Transform examples - Rich Bradshaw

© Copyright 1999-2017
Some rights reserved