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 is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
CSS3 2D transforms

Last accessed pages

  1. PHP getElementById and getElementsByTagName (19140)
  2. Redirects (503)
  3. innerHTML and outerHTML to Get and Replace HTML content (17553)
  4. Add Pause in JavaScript script (9350)
  5. Dynamic variables in JavaScript (6330)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (443)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (351)
  3. Register and show online users and visitors (319)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (300)
  5. Insert, Select and Update NULL value in MySQL (214)