# CSS conversion

## How to use CSS`transform`property

Transformation allows you to translate, rotate, scale and tilt elements in 2D or 3D space. They are very cool CSS features, especially when combined with animation.

## 2D conversion

This`transform`The properties accept the following functions:

• `translate()`Move elements
• `rotate()`Rotating element
• `scale()`Scale the size of the element
• `skew()`Distorted or skewed elements
• `matrix()`A way to perform any of the above operations using a matrix of 6 elements, a not very friendly syntax, but verbose

We also have axis-specific functions:

• `translateX()`Move elements around on the X axis
• `translateY()`Move elements around on the Y axis
• `scaleX()`Scale the size of the element on the X axis
• `scaleY()`Scale the size of the element on the Y axis
• `skewX()`Distort or tilt the element on the X axis
• `skewY()`Distort or tilt the element on the Y axis

This is a conversion example, this change will change`.box`The element width is multiplied by 2 (repeat), and the height is multiplied by 0.5 (reduced by half):

``````.box {
transform: scale(2, 0.5);
}``````

`transform-origin`Let's set the origin (`(0, 0)`Coordinates) to transform, let's change the center of rotation.

## Combine multiple transformations

You can combine multiple transformations by separating each function with a space.

E.g:

``transform: rotateY(20deg) scaleX(3) translateY(100px);``

## 3D conversion

We can go one step further and move the elements to 3D space instead of 2D space. For 3D, we added another axis Z, which increases the depth of the visual effect.

use`perspective`Property, you can specify the distance between the 3D object and the viewer.

example:

``````.3Delement {
perspective: 100px;
}``````

`perspective-origin`Determine the appearance of the viewer position and how we can view it on the X and Y axis.

Now, we can use other functions to control the Z axis. These functions add up to the transformation of other X and Y axes:

• `translateZ()`
• `rotateZ()`
• `scaleZ()`

And the corresponding shorthand`translate3d()`,`rotate3d()`with`scale3d()`As use`translateX()`,`translateY()`with`translateZ()`Function etc.