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 adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
CSS3 2D transforms

Last accessed pages

  1. $_GET, $_POST and $_REQUEST Variables (23432)
  2. Get Lower, Higher, and Closest Number (1449)
  3. Ajax-PHP Chat Script (31512)
  4. Download PHP MySQL resources (447)
  5. Flash Games - Free online Games (14878)

Popular pages this month

  1. Qwop (4653)
  2. Bubbles3 (3755)
  3. Butterfly Kyodai (3124)
  4. Drag Racer V3 (3079)
  5. Zuma Deluxe (2227)