CSS training classes in delhi NCR & gurgaon | 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 two types of transition property i.e. 2-D property and 3-D property.

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

We are having different methods in Transition.Let's understand them one-by-one.

Translate method

This method is used to move an element from its current position with respect to the X-axis or Y-axis .

Let's understand by the following program:-

<!DOCTYPE html>

<html>

<head>

<style>

div {

       width: 300px;

      height: 100px;

      background-color: pink;

      transform: translate(60px,50px);

}

</style>

</head>

<body >

<div > </div >

</body>

</html>

Output of the Program

So Through the translate method we can positionate our element.

Rotate method

We can rotate the elements by this metod of Transform property.

Let's understand by the following program:-

<!DOCTYPE html>

<html>

<head>

<style>

div {

       width: 300px;

      height: 100px;

      background-color: blue;

}

div#demo {

      transform: rotate(30deg);

}

</style>

</head>

<body >

<div> Normal one </div>

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

</body>

</html>

Output of the Program

So through the rotate method we have rotated our element into 30degree.

Scale method

Increasing or decreasing in size of the element is done by this Scale method.

Let's understand by the following program:-

<!DOCTYPE html>

<html>

<head>

<style>

div {

       width: 300px;

      height: 100px;

      background-color: blue;

      transform: scale(1.5);

}

</style>

</head>

<body >

<div > </div >

</body>

</html>

Output of the Program

So Through the scale method we can increase or decrease the element size.

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

Name	Description
translate(x,y)	We can positionate the element along X-axis and Y-axis.
translateX(n	We can positionate the element along X-axis .
translateY(n)	We can positionate the element along Y-axis .
rotate()	We can rotate the element on basis of angle.
scale(x,y)	We can change the width and height of the element.
scaleX(n)	We can change the width of the element.
scaleY(n)	We can change the height of the element.
skewX()	We can skew transform along the X-ais.
skewY()	We can skew transform along the Y-ais.
matrix()	Shorthand property to use all property in one line.

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