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.

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

Transform rotateX ()

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

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

Figure Transform

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

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

The usual div element.

Website TipsMake.com

The div element is rotateY 150deg.

Website TipsMake.com

Transform rotateZ ()

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

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

Micah Soto

Update 25 May 2019

You should read it

May be interested

Transition transition effect in CSS
transition properties in css are widely used in web design to create beautiful transition effects on websites easily.
Tooltip effect in CSS
tooltip is often used to make a small box appear when hovering over a text or image with information related to the component moved by the mouse.
Animation animation effects in CSS
animation was introduced in css3 version, allowing to create motion effects without using javascript or flash.
Create Button in CSS
buttons are clickable buttons on your site.
Query Media in CSS
@media in css is a feature that allows us to customize css to fit different devices
Use the Flexbox page layout in CSS
flexbox helps you solve a lot of layout problems in css in a flexible, easy and time-saving way with just a few lines of code.