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
What attribute makes the input text box to not be modified by the user?
checked="checked" readonly="readonly" disabled="disabled"
<input type="text" value="fixed-value" readonly="readonly" name="a_name" />
What CSS property allows you to create rounded corners in your webpage design?
background-size border-size border-radius
.class {
  border:2px solid blue;
  border-radius:1.2em;
}
What instruction displays a confirmation dialog box to the viewer, who must then click OK or Cancel to proceed?
indexOf() confirm() prompt()
var ques = window.confirm("The result of 0+0 is 0?");
if (ques) alert("Corect");
else alert("Incorrect");
Indicate the PHP function that returns the lowest number of the parameter values.
floor() ceil() min()
$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8
CSS3 2D transforms

Last accessed pages

  1. Star shapes with CSS (6079)
  2. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (48462)
  3. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (53970)
  4. Loading XML Data, Traversing XML Trees (602)
  5. Contact page - CoursesWeb (45939)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (363)
  2. Tabs effect with CSS (352)
  3. Contact page - CoursesWeb (351)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (133)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (81)