Child

CSS3 2D Transforms


« Previous Next Chapter »

transform is such a property of CSS3, which is used for changing the actual form of the element. With this feature ofCSS3 You can change the shape, size and position of an element.

2D Transform is such an amazing feature of CSS3 Transform, which is used for the following methods.

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

translate() Method: With the help of this method you can move your object depending on its parameter. Two type of parameter you can pass in this method one is from left (x-axis) and the another is from top (y-axis).

Here is the code:

div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-moz-transform:translate(50px,100px); /* Firefox */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
-o-transform:translate(50px,100px); /* Opera */
}

rotate() Method: With the help of this method you can rotate your object depending on its value. Two type of value you can pass in this method one is positive (for clockwise rotation) and the another one is negative (for counter-clockwise rotation).

Here is the code:

div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}

scale() Method: With the help of this method you can increase or decrease your object size depending on its value passed in the parameter. Two types of value you can pass in the parameter, one is for width (x-axis) and the another one for height (y-axis).

Here is the code:

div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-moz-transform:scale(2,4); /* Firefox */
-webkit-transform:scale(2,4); /* Safari and Chrome */
-o-transform:scale(2,4); /* Opera */
}

skew() Method: With the help of this method you can change the angle of your object depending on its value passed in the parameter. Two types of value you can pass in the parameter, one is for horizontal (x-axis) and the another one for vertical (y-axis).

Here is the code:

div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-moz-transform:skew(30deg,20deg); /* Firefox */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
-o-transform:skew(30deg,20deg); /* Opera */
}