MOCKSTACKS
EN
Questions And Answers

More Tutorials









CSS 2D Transform

CSS transforms allow you to move, rotate, scale, and skew elements. Mouse over the element below to see a 2D transformation: 2D rotate..

Function/Parameter Details
rotate(x) Defines a transformation that moves the element around a fixed point on the Z axis
translate(x,y) Moves the position of the element on the X and Y axis
translateX(x) Moves the position of the element on the X axis
translateY(y) Moves the position of the element on the Y axis
scale(x,y) Modifies the size of the element on the X and Y axis
scaleX(x) Modifies the size of the element on the X axis
scaleY(y) Modifies the size of the element on the Y axis
skew(x,y) Modifies the size of the element on the X axis
skewX(x) Horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction
skewY(y) Vertical shear mapping distorting each point of an element by a certain angle in the vertical direction
matrix() Defines a 2D transformation in the form of a transformation matrix.
matrix() Defines a 2D transformation in the form of a transformation matrix.
angle The angle by which the element should be rotated or skewed (depending on the function with which it is used). Angle can be provided in degrees (deg), gradians (grad), radians (rad) or turns (turn). In skew() function, the second angle is optional. If not provided, there will be no (0) skew in Y-axis.
length-or-percentage The distance expressed as a length or a percentage by which the element should be translated. In translate() function, the second length-or-percentage is optional. If not provided, then there would be no (0) translation in Y-axis.
scale-factor A number which defines how many times the element should be scaled in the specified axis. In scale() function, the second scale-factor is optional. If not provided, the first scale-factor will be applied for Y-axis also.


rotate

.Example{
transform: rotate(45deg);
}

original
rotate(45deg)

This example will rotate the div by 45 degrees clockwise. The center of rotation is in the center of the div, 50% from left and 50% from top. You can change the center of rotation by setting the transform-origin property.

transform-origin: 100% 50%;

The above example will set the center of rotation to the middle of the right side end.


scale

.Example{
transform: scale(0.5, 1.3);
}

original
scale(0.5, 1.3)

This example will skew the div by 20 degrees on the X axis and by - 30 degrees on the Y axis.

The center of the transform is in the center of the div, 50% from left and 50% from top.


Skew

.Example{
transform: skew(20deg, -30deg);
}

original
skew(20deg, -30deg)

This example will scale the div to 100px * 0.5 = 50px on the X axis and to 100px * 1.3 = 130px on the Y axis.

The center of the transform is in the center of the div, 50% from left and 50% from top


Translate

.Example{
transform: translate(200px, 50%);
}

original
translate(200px, 50%)

This example will move the div by 200px on the X axis and by 100px * 50% = 50px on the Y axis.

You can also specify translations on a single axis.






Conclusion

In this page (written and validated by ) you learned about CSS 2D Transforms . What's Next? If you are interested in completing CSS tutorial, your next topic will be learning about: CSS 3D Transforms.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.