Home Program CSS and CSS3

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.

Picture 1 of 3D Transform in CSS 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 ()

Picture 2 of 3D Transform in CSS

Transform rotateX ()

Picture 3 of 3D Transform in CSS

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:

Picture 4 of 3D Transform in CSS

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

Figure Transform

Picture 5 of 3D Transform in CSS







The usual div element.



Website TipsMake.com


The div element is rotateX 150deg.


>

Website TipsMake.com





Transform rotateY ()

Picture 6 of 3D Transform in CSS

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

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

Picture 7 of 3D Transform in CSS







The usual div element.



Website TipsMake.com



The div element is rotateY 150deg.



Website TipsMake.com





Transform rotateZ ()

Picture 8 of 3D Transform in CSS

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

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

Picture 9 of 3D Transform in CSS







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

You've just finished reading the article "3D Transform in CSS" edited by the TipsMake team. You can save 3d-transform-in-css.pdf to your computer here to read later or print it out. We hope this article has provided you with many useful tech tips and tricks. You can search for similar articles on tips and guides. Thank you for reading and for following us regularly.

Transform css translate in css rotate in css scale in css matrix in css transform values ​​in css how to use transform css
« PREV : Transition...
2D Transform in CSS... : NEXT »
Read more