Table of contents
- 1. Summary
- 2. Syntax
- 3. Values
- 4. Examples
- 4.1.1. Live Example
- 5. CSS transform functions
- 5.1. matrix
- 5.1.1. Live Examples
- 5.1.2. See also
- 5.2. rotate
- 5.3. scale
- 5.4. scaleX
- 5.5. scaleY
- 5.6. skew
- 5.7. skewX
- 5.8. skewY
- 5.9. translate
- 5.10. translateX
- 5.11. translateY
- 5.1. matrix
- 6. Browser compatibility
- 6.1. Notes
- 7. Specifications
- 8. See also
« CSS « CSS Reference
Summary
The transform CSS property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.
- Initial value : none
- Applies to: all block level and inline level elements
- Inherited : no
- Media:
visual - Computed value :
Syntax
transform: <transform-function> [<transform-function>]* | none
Vendor prefixes: See the compatibility table below for detail on the vendor prefixes you'll need to use for this feature.
Values
- transform-function
- One or more of the CSS transform functions to be applied, see below.
- none
- Specifies that no transform should be applied.
Examples
See Using CSS transforms.
Live Example
pre {
width: 33em;
border: solid red;
-moz-transform: translate(100px) rotate(20deg);
-moz-transform-origin: 60% 100%;
-webkit-transform: translate(100px) rotate(20deg);
-webkit-transform-origin: 60% 100%;
-o-transform:translate(100px) rotate(20deg);
-o-transform-origin:60% 100%;
-ms-transform: translate(100px) rotate(20deg);
-ms-transform-origin: 60% 100%;
transform: translate(100px) rotate(20deg);
transform-origin: 60% 100%;
}
CSS transform functions
The transform CSS property allows the coordinate system used by an element to be manipulated using transform functions. These functions are described below.
matrix
transform: matrix(a, c, b, d, tx, ty) /* Where a, b, c, d build the transformation matrix ┌ ┐ │ a b │ │ c d │ └ ┘ and tx, ty are the translate values. */
Specifies a 2D transformation matrix comprised of the specified six values. This is the equivalent to applying the transformation matrix [a b c d tx ty].
<length>
value for tx and ty.Webkit (Safari, Chrome) and Opera currently support a unitless
<number>
for tx and ty.Live Examples
background: gold; width: 30em;
-moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
-o-transform: matrix(1, -0.2, 0, 1, 0, 0);
-ms-transform: matrix(1, -0.2, 0, 1, 0, 0);
transform: matrix(1, -0.2, 0, 1, 0, 0);
background: wheat;
max-width: intrinsic;
-moz-transform: matrix(1, 0, 0.6, 1, 15em, 0);
-webkit-transform: matrix(1, 0, 0.6, 1, 250, 0);
-o-transform: matrix(1, 0, 0.6, 1, 250, 0);
-ms-transform: matrix(1, 0, 0.6, 1, 250, 0);
transform: matrix(1, 0, 0.6, 1, 250, 0);
See also
- Examples of linear transformation matrices Wikipedia
- Coordinate transformation matrices mathamazement.com
- Microsoft's matrix filter MSDN
rotate
transform: rotate(angle); /* an <angle>, e.g. rotate(30deg) */
Rotates the element clockwise around its origin (as specified by the transform-origin
property) by the specified angle. The operation corresponds to the matrix [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0].
scale
transform: scale(sx[, sy]); /* one or two unitless <number>s, e.g. scale(2.1,4) */
Specifies a 2D scaling operation described by [sx, sy]. If sy isn't specified, it is assumed to be equal to sx.
scaleX
transform: scaleX(sx); /* a unitless <number>, e.g. scaleX(2.7) */
Specifies a scale operation using the vector [sx, 1].
scaleY
transform: scaleY(sy) /* a unitless <number>, e.g. scaleY(0.3) */
Specifies a scale operation using the vector [1, sy].
skew
transform: skew(ax[, ay]) /* one or two <angle>s, e.g. skew(30deg,-10deg) */
Skews the element around the X and Y axes by the specified angles. If ay isn't provided, no skew is performed on the Y axis.
skewX
transform: skewX(angle) /* an <angle>, e.g. skewX(-30deg) */
Skews the element around the X axis by the given angle.
skewY
transform: skewY(angle) /* an <angle>, e.g. skewY(4deg) */
Skews the element around the Y axis by the given angle.
translate
transform: translate(tx[, ty]) /* one or two <length> values */
Specifies a 2D translation by the vector [tx, ty]. If ty isn't specified, its value is assumed to be zero.
translateX
transform: translateX(tx) /* see <length> for possible values */
Translates the element by the given amount along the X axis.
translateY
transform: translateY(ty) /* see <length> for possible values */
Translates the element by the given amount along the Y axis.
Browser compatibility
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 3.5 (1.9.1) -moz | yes -webkit | 9.0 -ms | 10.5 -o | 3.1 -webkit |
| 3D Support | 10.0 -moz | 12.0 -webkit | 10.0 -ms | no | 4.0 -webkit |
| Feature | iOS Safari | Opera Mini | Opera Mobile | Android Browser |
|---|---|---|---|---|
| Basic support | ? | ? | ? | ? |
Notes
Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve the similar effect.
Specifications
See also
transform-origin- Using CSS transforms
- More info on CSS3 Rotation / Matrix Filter issues in the comments on Paul Irish's blog.
- A cross-browser 2D transform plugin for jQuery


Mozilla Developer Network