3D Transform in CSS

Transform in CSS are attributes used to "transform" the original elements, allowing us to change position, shape or rotate elements in dimensions.

There are two common types: 2D and 3D transformation.

(Transformation is a generic method of changing the shape, size and position of an element).

In this article, TipsMake.com will work with you to learn about 3D Transform, values, usage as well as the most specific examples for you to easily imagine.

What is 3D Transform?

3D Transform are attributes used to process 3D moving effects for elements in 3 axes: x, y and z.

Some examples of 3D transform

The syntax for creating transforms is as follows:

 transform: value; 

The values ​​commonly used with 3D transform are:

1. rotateX ()
2. rotateY ()
3. rotateZ ()

Transform rotateX ()

RotateX () is used to rotate the element around the X axis at a certain angle.

 #myDiv { 
  -webkit-transform: rotateX(150deg); /* Safari */ 
  transform: rotateX(150deg); 
 } 

Original image:

(* The examples in the article are all transformed from this image)

Figure Transform

The usual div element.

Website TipsMake.com