CSS transform Property
Description
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
Syntax
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;
Values
- 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.
Example
.class { transform: rotate(90deg); }
Browser Support
?![]() | ?![]() | ?![]() | ?![]() | ?![]() |
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.