CSS 3D Transforms

➢CSS also supports 3D transformations.
➢With the CSS transform property you can use the following 3D transformation methods:
➢rotateX()
➢rotateY()
➢rotateZ()

The rotateX() Method

➢The rotateX()method rotates an element around its X-axis at a given degree:

EXAMPLE:

.bmr {
     width: 200px;
     height: 25px;
}

.bmr2 {
     transform: rotateX(50deg);
}

Run

The rotateY() Method

➢The rotateY() method rotates an element around its Y-axis at a given degree:

EXAMPLE:

.bmr {
     width: 250px;
     height: 50px;
}

.bmr2 {
     transform: rotateY(75deg);
}

Run

The rotateZ() Method

➢The rotateZ()method rotates an element around its Z-axis at a given degree:

EXAMPLE:

.bmr {
     width: 300px;
     height: 75px;
}

.bmr2 {
     transform: rotateZ(100deg);
}

Run

Prev Page Next Page