CSS3 2D transforms

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>

<<-CSS3 opacity -- CSS3 transition->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used in <table> to create table header cell?

<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>

Which CSS property sets the distance between lines?

line-height word-spacing margin

.some_class {
  line-height: 150%;
}

Which function opens a new browser window.

alert() confirm() open()

document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}

Indicate the PHP function that returns an array with names of the files and folders inside a directory.

mkdir() scandir() readdir()

$ar_dir = scandir("dir_name");
var_export($ar_dir);