The transform property allow elements styled with CSS to be transformed in two-dimensional or three-dimensional space. Using this property, elements can be translated, rotated, scaled, and skewed. The value list may consist of 2D and/or 3D transform values.

  • Initial valuenone
  • Applies toTransformable elements
  • InheritedNo
  • MediaVisual
  • Computed valueAs specified
  • AnimatableYes
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.transform
Formal syntax: none | <transform-list>

transform: matrix(a, c, b, d, tx, ty);
transform: matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p);
transform: rotate(angle);
transform: rotate3d(x, y, z, a);
transform: rotateX(ax);
transform: rotateY(ay);
transform: rotateZ(az);
transform: scale(sx[, sy]);
transform: scale3d(sx, sy, sz);
transform: scaleX(sx);
transform: scaleY(sy);
transform: scaleZ(sz);
transform: skew(ax[, ay]);
transform: skewX(angle);
transform: skewY(angle);
transform: translate(tx[, ty]);
transform: translate3d(tx, ty, tz);
transform: translateX(tx);
transform: translateY(ty);
transform: translateZ(tz);
transform: perspective(<length>);
transform: none;
  • matrix(a, b, c, d, e, f)Specifies a 2D transformation matrix in the form of a transformation matrix of the six values, a-f.
  • matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)Specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order.
  • rotate(angle)Specifies a 2D rotation by the specified angle about the origin of the element, as defined by the transform-origin property.
  • rotate3d(x, y, z, a)Specifies a 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first three parameters.
  • rotateX(ax)Specifies a 3D rotation by the angle specified in the X direction. Equivalent to rotate3d(1, 0, 0, ax).
  • rotateY(ay)Specifies a 3D rotation by the angle specified in the Y direction. Equivalent to rotate3d(0, 1, 0, ay).
  • rotateZ(az)Specifies a 3D rotation by the angle specified in the Z direction. Equivalent to rotate3d(0, 0, 1, az).
  • scale(sx[, sy])Specifies a 2D scaling operation described by [sx, sy]. If sy is not specified, it is assumed to be equal to sx.
  • scale3d(sx, sy, sz)Specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the three parameters.
  • scaleX(sx)Specifies a scale operation using the vector [sx, 1].
  • scaleY(sy)Specifies a scale operation using the vector [1, sy].
  • scaleZ(sz)Specifies a 3D scale operation by the scaling vector [1,1,sz].
  • skew(ax[, ay])Specifies a 2D skew by [ax,ay] for X and Y. If the second parameter is not provided, it is assumed to be zero.
  • skewX(angle)Specifies a 2D skew transformation along the X axis by the given angle.
  • skewY(angle)Specifies a 2D skew transformation along the Y axis by the given angle.
  • translate(tx[, ty])Specifies a 2D translation by the vector [tx, ty]. If ty is not specified, its value is assumed to be zero.
  • translate3d(tx, ty, tz)Specifies a 3D translation by the vector [tx,ty,tz] in the X, Y, and Z directions.
  • translateX(tx)Translates the element by the given amount along the X axis.
  • translateY(ty)Translates the element by the given amount along the Y axis.
  • translateZ(tz)Specifies a 3D translation by the vector [0,0,tz] in the Z direction.
  • perspective(<length>)Specifies a perspective projection matrix, which scales points in the X and Y directions based on their Z value. Thus, points with positive Z values are scaled away from the origin, and those with negative Z values are scaled toward the origin.
  • noneSpecifies that no transform should be applied.
.class {
   transform: rotate(90deg);
}
?Firefox?Explorer?Chrome?Safari?Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.