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() .

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>
#idv {
 width:90px;
 height:90px;
 background:#b0b1fe;
 font-size:17px;
}

#idv:hover {
 transform: translate(20px, 15px);
}
</style>

<h4>Example transform: translate()</h4>

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

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>
#idv2 {
 width:90px;
 height:90px;
 background:#b0b1fe;
 font-size:17px;
}

#idv2:hover {
 transform: rotate(60deg);
}
</style>

<h4>Example transform: rotate()</h4>

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

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>
#idv3 {
 width:90px;
 height:90px;
 background:#b0b1fe;
 font-size:17px;
 margin:8px 8px 8px 75px;
}

#idv3:hover {
 transform: scale(2, 1.5);
}
</style>

<h4>Example transform: scale()</h4>

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

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>
#idv4 {
 width:160px;
 height:90px;
 background:#abcdfe;
 font-size:18px;
 margin:45px 8px 8px 70px;
 transform: skew(20deg, 25deg);
}
</style>

<h4>Example transform: skew()</h4>

<div id='idv4'>coursesweb.net</div>
• You can also use multiple 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>
#idv5 {
 width:90px;
 height:90px;
 background:#00da01;
 font-size:17px;
 margin:45px 8px 8px 75px;
 transform: translate(50px, 25px) rotate(-30deg) scale(2, 1.5) skew(15deg, 20deg);
}
</style>

<h4>Example CSS transform property</h4>

<div id='idv5'>Some content...</div>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which type of <input> creates a date input control, such as a pop-up calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Which CSS property adds shadow effects to the text of an element?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Click on the function that adds new elements to the end of an array.
pop() shift() push()
var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]);            // download
Which function sorts an array by key, in ascending order, maintaining key to data correlations?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
CSS3 2D transforms

Last accessed pages

  1. SHA1 Encrypt data in JavaScript (17934)
  2. Select in MySQL, Output results in HTML Table (12672)
  3. Add and Remove HTML elements and Content with jQuery (27170)
  4. Display data from PHP Array, or MySQL in HTML table (19113)
  5. querySelector and querySelectorAll (15681)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (154)
  2. Node.js Move and Copy file (96)
  3. Register and show online users and visitors (93)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (81)
  5. HTML Course - Free Lessons (70)