Help:CSS Transforms

This article needs more work.

Please help by expanding it!

CSS Transforms:

• 2D-transforms (affine transforms);
• 3D-transforms (perspective transforms) are only supported by WebKit (Safari and Chrome).

2D-transforms

2D-transforms (affine transforms). The transforms are executed from right to left.

CSS Transform origin

Relative to bounding box of the element.

unit: %, px, pt, pc, em, ex
x: left, center, right, length unit (default: 50%)
y: top, center, bottom, length unit (default: 50%)
z: length (default: 0)

transform-origin: x y;
-ms-transform-origin: x y; /* Internet Explorer (only for 2D-transforms, change the x- and y-axis) */
-moz-transform-origin: x y; /* Firefox (only for 2D-transforms, change the x- and y-axis) */ 
-webkit-transform-origin: x y z; /* Safari and Chrome (only for both 2D- and 3D-transfoms, change the x-, y- and z-axis) */
-o-transform-origin: x y; /* Opera (only for 2D-transforms, change the x- and y-axis) */

CSS Translation

Percentages are relative to the border box of the element.

unit: %, px, pt, pc, em, ex
tx: length unit (default: 0)
ty: length unit (default: 0)

transform: translate(tx ty);
-ms-transform: translate(tx ty); /* Internet Explorer */
-moz-transform: translate(tx ty); /* Firefox */
-webkit-transform: translate(tx ty); /* Safari and Chrome */
-o-transform: translate(tx ty); /* Opera */

translate?: translateX, translateY
t?: tx, ty

transform: translate?(t?);
-ms-transform: translate?(t?); /* Internet Explorer */
-moz-transform: translate?(t?); /* Firefox */
-webkit-transform: translate?(t?); /* Safari and Chrome */
-o-transform: translate?(t?); /* Opera */

CSS Scaling

Scale an element around the transform origin. (Negative scale flips an element.)

unit: %
sx: factor unit (default: 100%)
sy: factor unit (default: 100%)

transform: scale(sx sy);
-ms-transform: scale(sx sy); /* Internet Explorer */
-moz-transform: scale(sx sy); /* Firefox */
-webkit-transform: scale(sx sy); /* Safari and Chrome */
-o-transform: scale(sx sy); /* Opera */

scale?: scaleX, scaleY
s?: sx, sy

transform: scale?(s?);
-ms-transform: scale?(s?); /* Internet Explorer */
-moz-transform: scale?(s?); /* Firefox */
-webkit-transform: scale?(s?); /* Safari and Chrome */
-o-transform: scale?(s?); /* Opera */

CSS Rotation

Rotate an element around the transform origin. (Positive angle rotates an element clockwise.)

unit: deg, rad
theta: angle unit 

transform: rotate(theta);
-ms-transform: rotate(theta); /* Internet Explorer */
-moz-transform: rotate(theta); /* Firefox */
-webkit-transform: rotate(theta); /* Safari and Chrome */
-o-transform: rotate(theta); /* Opera */

CSS Skewing

Skew an element around the transform origin. (Positive angle skews an element clockwise.)

unit: deg, rad
thetaX: angle unit
thetaY: angle unit

transform: skew(thetaX thetaY);
-ms-transform: skew(thetaX thetaY); /* Internet Explorer */
-moz-transform: skew(thetaX thetaY); /* Firefox */
-webkit-transform: skew(thetaX thetaY); /* Safari and Chrome */
-o-transform: skew(thetaX thetaY); /* Opera */

skew?: skewX, skewY
theta?: thetaX,  thetaY

transform: skew?(theta?);
-ms-transform: skew?(theta?); /* Internet Explorer */
-moz-transform: skew?(theta?); /* Firefox */
-webkit-transform: skew?(theta?); /* Safari and Chrome */
-o-transform: skew?(theta?); /* Opera */

CSS Affine transform matrix

Specify a full affine transform matrix, which takes six values. The last two values are the tx and ty, and they can be lengths or percentages.

• matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

3D-transforms

Note: 3D-transforms (perspective transforms) are only supported by WebKit (Safari and Chrome).

Positive values of z are towards the viewer (right hand rule with positive x rightwards and positive y upwards). The transforms are executed from right to left.

• translate3d(x, y, z)
• translateZ(z)

• scale3d(sx, sy, sz)
• scaleZ(sz)

• rotateX(value)
• rotateY(value)
• rotate3d(x, y, z)

• matrix3d(…) (To programmatically describe a 3D transform in a 4x4 matrix. Not intended to be written by hand!)

• perspective(value)

External links

• Rotate Elements with CSS Transformations — David Walsh Blog.
• WebKit CSS Transforms — Posted by Dave Hyatt on Friday, October 26th, 2007.
• CSS3 transform Property — W3Schools.com
• CSS3 transform-origin Property — W3Schools.com
• transform — CSS-Tricks.