CSS Transform

The CSS transform property allows you to perform 2D and 3D transformations on an element. This includes moving, scaling, rotating, skewing, and more.

2D Transforms

Translate

The translate() function moves an element from its current position (left or right and up or down).

div {  transform: translate(50px, 100px);}

In this example, the div element will move 50 pixels to the right and 100 pixels down from its original position.

Scale

The scale() function increases or decreases the size of an element (width and height).

div {  transform: scale(2, 0.5);}

In this example, the div element's width is doubled and the height is reduced by half.

Rotate

The rotate() function rotates an element clockwise or counterclockwise by a specified degree.

div {  transform: rotate(45deg);}

In this example, the div element is rotated 45 degrees clockwise.

Skew

The skew() function skews an element along the X and Y-axis by the given angles.

div {  transform: skew(20deg, 25deg);}

In this example, the div element is skewed 20 degrees along the X-axis and 25 degrees along the Y-axis.

3D Transforms

Rotate 3D

The rotate3d() function rotates an element in 3D space around the [x,y,z] direction vector by a specified angle.

div {  transform: rotate3d(1, 1, 1, 45deg);}

In this example, the div element is rotated 45 degrees around the [1,1,1] direction vector.

Translate 3D

The translate3d() function moves an element in 3D space.

div {  transform: translate3d(50px, 100px, 200px);}

In this example, the div element will move 50 pixels to the right, 100 pixels down, and 200 pixels into the page.

Scale 3D

The scale3d() function scales an element in 3D.

div {  transform: scale3d(2, 0.5, 1.5);}

In this example, the div element's width is doubled, the height is reduced by half, and the depth is increased by 1.5 times.

Perspective

The perspective() function defines how far the object is away from the user in 3D space.

div {  transform: perspective(500px);}

In this example, the div element is positioned 500 pixels from the viewer.

Remember, the CSS transform property provides a way to create both 2D and 3D transformations, creating more dynamic and engaging web experiences.