CSS training classes in delhi NCR & gurgaon | IT & CSS training institute in gurgaon

Due to this property we can also translate, rotate, scale , skew to our elements.So with this property we can change the shape, size of theelement. CSS3 provides us Transform 3-D property by which we can change or faciliate our elements to X-axis, Y-axis and Z-axis .

In this chapter we will be talking about Transform 3-D property.

Let's see some property comparing to transform 3-D transform property.

X-axis rotate and 3-D rotate(X) method

This method is used to rotate element according to the X-axis.

Let's understand by the following program:-

<!DOCTYPE html>

<html>

<head>

<style>

div {

       width: 300px;

      height: 100px;

      background-color: blue;

}

div #demo {

      transform: rotateX(120deg);

}

</style>

</head>

<body >

<div> </div>

<div id="demo"> </div>

</body>

</html>

Output of the Program

So this is how we can rotate the element around its X-axis.

Y-axis rotate and 3-D rotate(Y) method

This method is used to rotate element according to the X-axis.

Let's understand by the following program:-

<!DOCTYPE html>

<html>

<head>

<style>

div {

       width: 300px;

      height: 100px;

      background-color: blue;

}

div #demo {

      transform: rotateY(120deg);

}

</style>

</head>

<body >

<div> </div>

<div id="demo"> </div>

</body>

</html>

Output of the Program

So this is how we can rotate the element around its Y-axis.

Z-axis rotate and 3-D rotate(Z) method

This method is used to rotate element according to the Z-axis.

Let's understand by the following program:-

<!DOCTYPE html>

<html>

<head>

<style>

div {

       width: 300px;

      height: 100px;

      background-color: blue;

}

div #demo {

      transform: rotateZ(120deg);

}

</style>

</head>

<body >

<div> </div>

<div id="demo"> </div>

</body>

</html>

Output of the Program

So this is how we can rotate the element around its Z-axis.

We are having different types of methods also in Transform 3-D property which are described below:-

Name	Description
translateX(x)	It specifies 3D translation, using only the value for the X-axis
translateY(y)	It specifies 3D translation, using only the value for the Y-axis.
translateZ(z))	It specifies 3D translation, using only the value for the Z-axis.
translate3D(x,y,z)	It specifies a 3D translation.
scaleX(x)	It specifies 3D scale transformation by giving a value for the X-axis.
scaley(y)	It specifies 3D scale transformation by giving a value for the Y-axis.
scaleZ(z)	It specifies 3D scale transformation by giving a value for the Z-axis.
scale3D(x,y,z)	It specifies 3D scale transformation.
rotate3D(X,Y,Z,angle)	It specifies 3D rotation along with X-axis, Y-axis and Z-axis.
rotateX(angle)	It specifies 3D rotation along with X-axis.
rotateY(angle)	It specifies 3D rotation along with Y-axis.
rotateZ(angle)	It specifies 3D rotation along with Z-axis.
perspective(n)	It specifies a perspective view for a 3D transformed element.

CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute