CSS Beginners Guide part 13 - CSS 2D and 3D Transforms

with css3 we can transform and animate the html elements, CSS have two types of transforms 2d transform and 3d transform, we can move the elements, scale the elements, turn, spin, stretch and  rotate the elements the css3 transforms supports all major browsers and some of them to 3D transforms

2D Transforms Properties
in 2d transforms we have few properties and we can use them to transform the html elements

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

Translate Property
we can move the html elements from current positions to selecting positions depending on the give X and Y axis positions

<style>

div{

// the div moves from current position to 50 pixels from left and 50 pixels from top

transform: translate(50px,50px);
-ms-transform: translate(50px,50px); // IE Browser
-webkit-transform: translate(50px,50px); // for Safari and Chrome
-moz-transform: translate(50px,50px); // for Mozilla
-o-transform: translate(50px,50px); // for Opeta

}

</style>

Rotate Property
we can rotate the elements clock wise and counter clock wise as a given degree, rotate the elements 0 to 360 degrees.

<style>

div{

// the div rotate from 0 to 90 degrees to clock-wise

transform: rotate(90deg);
-ms-transform: rotate(90deg); // IE Browser
-webkit-transform: rotate(90deg); // for Safari and Chrome
-moz-transform: rotate(90deg); // for Mozilla
-o-transform: rotate(90deg); // for Opera

// the div rotate from 0 to minus 90 degrees to counter-clock-wise

transform: rotate(-90deg);
-ms-transform: rotate(-90deg); // IE Browser
-webkit-transform: rotate(-90deg); // for Safari and Chrome
-moz-transform: rotate(-90deg); // for Mozilla
-o-transform: rotate(-90deg); // for Opera

}

</style>

Scale Property
we can increase and decrease the width and height of html elements using scale() method 

<style>

div{

// the div scale x and y access

transform: scale(10,15);
-ms-transform: scale(10,15); // IE Browser
-webkit-transform: scale(10,15); // for Safari and Chrome
-moz-transform: scale(10,15); // for Mozilla
-o-transform: scale(10,15); // for Opera

}

</style>

Skew Property
the skew() method turns the elements in a given angle depending on the skew parameters 

<style>

div{

// the div scale x and y access

transform: skew(10deg,20deg);
-ms-transform: skew(10deg,20deg); // IE Browser
-webkit-transform: skew(10deg,20deg); // for Safari and Chrome
-moz-transform: skew(10deg,20deg); // for Mozilla
-o-transform: skew(10deg,20deg); // for Opera

}

</style>