CSS transform Property

Description

The transform CSS property is a powerful tool that allows web developers to apply various geometric transformations to HTML elements. These transformations include translations (moving an element along the X, Y, or Z-axis), rotations (changing the orientation of an element), scaling (resizing an element), skewing (tilting an element), and more. The transform property enables the creation of engaging and interactive web interfaces by manipulating the position and appearance of elements without affecting their layout in the document flow. It is commonly used in conjunction with CSS transitions and animations to create visually dynamic web experiences.

Initial value

none

Applies to

Transformable elements

Inherited

No

Computed value

As specified

Animatable

Yes

JavaScript syntax

object.style.transform

Interactive Demo

transform: scale(2);

transform: skew(30deg, 20deg);

transform: rotate(0.5turn);

transform: translate(120px, 50%);

transform: scale(1, 0.5);

transform: matrix(1, 2, 3, 4, 5, 6);

View Code

Syntax

transform: none | <transform-list>

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

<h2>2D CSS Conversions</h2> 

<div class="static"><div class="test"> translate (-20px, -20px) </div></div> 

<div class="static"><div class="test2"> scaleX (.5) </div></div> 

<div class="static"><div class="test3"> scale (0, 0.5) </div></div> 

<br> 

<div class="static"><div class="test4"> rotate (2turn) </div></div> 

<div class="static"><div class="test5"> skewY (20deg) </div></div> 

<div class="static"><div class="test6"> matrix (.7,0, .5, .7, -99, -99) </div></div> 

.static {
   margin: 10px;
   background: gray;
   display: inline-block; 
} 
div {
   width: 180px;
   height : 100px;
   text-align: center; 
   line-height: 100px;
   transition: .3s linear; 
   -moz-transition: .3s linear;
   -webkit-transition: .3s linear; 
} 
.test2, .test4, .test6 { 
   background: orange;  
}
.test, .test3, .test5 { 
   background: plum;  
} 
.test:hover {
   transform: translate(-20px, -20px);
   -webkit-transform: translate(-20px, -20px); 
   -moz-transform: translate(-20px, -20px); 
   -ms-transform: translate(-20px, -20px);
}  
.test2:hover {
   transform: scaleX(.5);
   -webkit-transform: scaleX(.5);
   -moz-transform: scaleX(.5);
   -ms-transform: scaleX(.5); 
} 
.test3:hover {
   transform: scale(0, 0.5); 
   -webkit-transform: scale(0, 0.5);
   -moz-transform: scale(0, 0.5);
   -ms-transform: scale(0, 0.5); 
}  
.test4:hover {
   transform: rotate(2turn); 
   -webkit-transform: rotate(2turn); 
   -moz-transform: rotate(2turn); 
   -ms-transform: rotate(2turn);
}  
.test5:hover {
   transform: skewY(20deg);
   -webkit-transform: skewY(20deg);
   -moz-transform: skewY(20deg); 
   -ms-transform: skewY(20deg);
}  
.test6:hover {
   transform: matrix(.7,0, .5, .7, -99, -99); 
   -webkit-transform: matrix(.7,0, .5, .7, -99, -99); 
   -moz-transform: matrix(.7,0, .5, .7, -99, -99); 
   -ms-transform: matrix(.7,0, .5, .7, -99, -99); 
}   

Browser Support

The following table will show you the current browser support for the CSS transform property.

Desktop
12	36	16	23	9

Tablets / Mobile
36	16	24	9	3	4.4

Last updated by CSSPortal on: 2nd January 2024