3D Transform in CSS

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

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.

3D Transform in CSS Picture 1 3D Transform in CSS Picture 1 Some examples of 3D transform

The syntax for creating transforms is as follows:

 transform: value;

The values commonly used with 3D transform are:

rotateX ()
rotateY ()
rotateZ ()

3D Transform in CSS Picture 2 3D Transform in CSS Picture 2

Transform rotateX ()

3D Transform in CSS Picture 3 3D Transform in CSS Picture 3

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:

3D Transform in CSS Picture 4 3D Transform in CSS Picture 4

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

Figure Transform

3D Transform in CSS Picture 5 3D Transform in CSS Picture 5

The usual div element.

Website TipsMake.com

The div element is rotateX 150deg.

>

Website TipsMake.com

Transform rotateY ()

3D Transform in CSS Picture 6 3D Transform in CSS Picture 6

RotateY () is used to rotate the element around the Y axis at a specified angle.

 #myDiv { 
  -webkit-transform: rotateY(130deg); /* Safari */ 
  transform: rotateY(130deg); 
 }

3D Transform in CSS Picture 7 3D Transform in CSS Picture 7

The usual div element.

Website TipsMake.com

The div element is rotateY 150deg.

Website TipsMake.com

Transform rotateZ ()

3D Transform in CSS Picture 8 3D Transform in CSS Picture 8

RotateZ () is used to rotate the element around the Z axis at a certain angle.

 #myDiv { 
  -webkit-transform: rotateZ(90deg); /* Safari */ 
  transform: rotateZ(90deg); 
 }

3D Transform in CSS Picture 9 3D Transform in CSS Picture 9

The usual div element.

Website TipsMake.com

The div element is rotateZ 150deg.

Website TipsMake.com

To use this attribute fluently, you must practice a lot and capture the coordinates for easy navigation. With transform, you can completely create an interface with many 2D and 3D shapes, making the website more lively and professional. TipsMake.com will explore this issue further in the following lessons. Have you remembered to it!

Previous lesson: 2D Transform in CSS

Next lesson: Transition transition effect in CSS