2D Transforms in CSS3

Cascading Style Sheets or simply CSS is used to control the style and layout of Web pages. Css3 has been introduced with lot of improved features than that were there in earlier versions of CSS3. CSS3 allows users to create 2D Transforms, 3D Transforms  Transitions, Animation and so many more colorful and interesting features to be added to the web pages that they create. Through these features, we b pages improve their performance much more other than using videos or something like flash controls to create attractive web designs.

I am going to describe some interesting 2D Transforms that are available in CSS3. All what I am going to play around here is a simple div control with some initial styles. It will be used through out all the steps to demonstrate different 2D Transforms. A Transform is an effect that lets an element change shape, size and position.

Though I can embed the style tags within my html page, I have created them seperately, but I'll be explaining each together for clarification.

OK, this is my initial div with styles

//in StyleSheet2.css file
div
{
   width:100px;
   height: 75px;
   border:5px;
   border-style:ridge;
   border-radius:7px;
   background-color:Aqua; 
}

//in Css3Transform.html file

<div class="div"> I am the original div</div>

output:-

I am going to shift the shape 50px in X axis and 100px in Y axis

//in StyleSheet2.css file
div#div2
{
    background-color:Coral;       
    -webkit-transform:translate(200px,30px);/*move the div 200px of X and 30px of Y*/
}

//in Css3Transform.html file

<div id="div2">I am translated by 50px of x and 100px of y</div>

I am going to rotate the shape by 30 degrees

//in StyleSheet2.css file

div#div3
{ 
  background-color:CornflowerBlue;       
 -webkit-transform:rotate(30deg); /* rotate the above div in 30 degrees(works in Chrome) */  
}

//in Css3Transform.html file

<div id="div3"> I am rotated by 30 degrees</div>

I am going to scale up the shape by 1.5 times of x and 2 times of Y

//in StyleSheet2.css file
div#div4
{
    background-color:Aquamarine;
    -webkit-transform:scale(1.5,2);/*scale up x with 1.5 times and y with 2 times*/
}

//in Css3Transform.html file

<div id="div4"> i am scaled up 1.2 times x and 1.5 times y</div>

I am going to turn the shape 20 degrees to X axis and 30 degrees to Y axis

//in StyleSheet2.css file
div#div5
{
    background-color:BurlyWood;
    -webkit-transform:skew(20deg,30deg);
    /*With the skew() method, the element turns in a given angle, 
    depending on the parameters given for the horizontal (X-axis) 
    and the vertical (Y-axis) lines:*/
}

//in Css3Transform.html file

<div id="div5"> i am skewed 20deg to X and 30degs to Y</div>

I am going to turn the shape only toward X axis by 45 degrees

//in StyleSheet2.css file
div#div6
{
    background-color:Purple;
    -webkit-transform:skewX(45deg);/*turn to X axis only in 45 degrees */
}

//in Css3Transform.html file

<div id="div6"> i am skewed 45deg to X only</div>

I am going to turn the shape only toward Y axis by 45 degrees

//in StyleSheet2.css file
div#div7
{
    background-color:Pink;
    -webkit-transform:skewY(45deg);/*turn to y axis only in 45 degrees */
}


//in Css3Transform.html file
<div id="div7"> i am skewed 45deg to Y only</div>


The final output compared to the initial div element:-

you can get the source files from the below links

DOWNLOAD FROM HERE


VIEW IN BROWSER