With CSS transform property you can change shape, size and position of a HTML element.
You can transform your elements using 2D or 3D transformation.
- Syntax:

transform: method(values);
- This tutorial shows the 2D transform methods:   translate(),   rotate(),   scale(),   skew() .

Internet Explorer 9 uses:   -ms-transform .
Firefox uses:   -moz-transform .
Chrome and Safari use:   -webkit-transform .
Opera uses:   -o-transform .

The translate() Method

The translate() method moves the element from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position.
- Syntax:
transform: translate(X, Y);
Example. When a user mouse-over a Div with id="idv", moves its position 20px from the left, and 15px from the top.
<style type="text/css">
#idv {
 width:90px;
 height:90px;
 background:#b0b1fe;
 font-size:17px;
}

#idv:hover {
 transform: translate(20px, 15px);
-ms-transform: translate(20px, 15px);  /* IE 9 */
-webkit-transform: translate(20px, 15px);  /* Safari and Chrome */
-o-transform: translate(20px, 15px);  /* Opera */
-moz-transform: translate(20px, 15px);  /* Firefox */
}
</style>

<div id="idv">Hover over this square</div>

Demo:
Hover over this square

CSS rotate()

The rotate() method rotates the HTML element clockwise at a given degree. Negative values will rotate the element counter-clockwise.
- Syntax:
transform: rotate(degree);
Example. Rotates the element clockwise 60 degrees.
<style type="text/css">
#idv2 {
 width:90px;
 height:90px;
 background:#b0b1fe;
 font-size:17px;
}

#idv2:hover {
 transform: rotate(60deg);
-ms-transform: rotate(60deg);  /* IE 9 */
-webkit-transform: rotate(60deg);  /* Safari and Chrome */
-o-transform: rotate(60deg);  /* Opera */
-moz-transform: rotate(60deg);  /* Firefox */
}
</style>

<div id="idv2">Hover over this square</div>

Demo:
Hover over this square

The scale() Method

The scale() method increases or decreases the size of the HTML element (including its content), depending on the parameters given for the width (X-axis) and the height (Y-axis).
- Syntax:
transform: scale(Width, Height);
- The values for Width and Height are in percentages. For example, 1.5 means 150% from original size.

Example. Transforms the width to be twice its original size, and the height 1.5 times its original size.
<style type="text/css">
#idv3 {
 width:90px;
 height:90px;
 background:#b0b1fe;
 font-size:17px;
}

#idv3:hover {
 transform: scale(2, 1.5);
-ms-transform: scale(2, 1.5);  /* IE 9 */
-webkit-transform: scale(2, 1.5);  /* Safari and Chrome */
-o-transform: scale(2, 1.5);  /* Opera */
-moz-transform: scale(2, 1.5);  /* Firefox */
}
</style>

<div id="idv3">Hover over this square</div>

Demo:

Hover over this square


CSS skew()

The skew() method turns /distorts the HTML element in a given angle (including its content), depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines.
- Syntax:
transform: skew(Xdeg, Ydeg);
Example. Distorts the element 20 degrees around the X-axis, and 25 degrees around the Y-axis.
<style type="text/css">
#idv4 {
 width:160px;
 height:90px;
 background:#abcdfe;
 font-size:18px;
 transform: skew(20deg, 25deg);
-ms-transform: skew(20deg, 25deg);  /* IE 9 */
-webkit-transform: skew(20deg, 25deg);  /* Safari and Chrome */
-o-transform: skew(20deg, 25deg);  /* Opera */
-moz-transform: skew(20deg, 25deg);  /* Firefox */
}
</style>

<div id="idv4">coursesweb.net</div>

Demo:
coursesweb.net


• You can also use the 2D transformation methods into a single transform definition, separated by space.
- Syntax:
transform: translate(X, Y) rotate(degree) scale(Width, Height) skew(Xdeg, Ydeg);
- You no need to add all the four methods, only the transformations you want.

Example, moves the element 50px from the left, and 25px from the top, rotates it counter-clockwise 20 degrees, transforms the width to be twice its original size, and the height 1.5 times its original size, and distorts the element 15 degrees around the X-axis, and 20 degrees around the Y-axis.
<style type="text/css">
#idv5 {
 width:90px;
 height:90px;
 background:#00da01;
 font-size:17px;
 transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg);
-ms-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg);  /* IE 9 */
-webkit-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg);  /* Safari and Chrome */
-o-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg);  /* Opera */
-moz-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg);  /* Firefox */
}
</style>

<div id="idv5">Some content...</div>
Demo:
Some content...

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag create a highlighted bolded text?
<q> <strong> <em>
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
Which of these CSS codes displays the text bolded?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
What JavaScript function can be used to call another function multiple times, to a specified time interval?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Click on the correctly defined variable in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
CSS3 2D transforms

Last accessed pages

  1. JavaScript Course - Free lessons (13563)
  2. Voting Poll System script PHP-AJAX (5591)
  3. Zoo Amigos (6879)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (59545)
  5. Uploading images to server with Ajax (4731)

Popular pages this month

  1. Qwop (7622)
  2. Drag Racer V3 (4432)
  3. Bubbles3 (1773)
  4. Flash Games - Free online Games (1614)
  5. Butterfly Kyodai (1286)