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 adds an image in web page?

<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />

Which of these CSS codes displays the text oblique?

font-style: italic; text-decoration: underline; font-weight: 500;

#id {
  font-style: italic;
}

Click on the jQuery function used to hide with animation a HTML element.

click() hide() show()

$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});

Click on the correctly defined function in PHP.

fname function() {} function fname() {} function $fname() {};

function fname($a, $b) {
  echo $a * $b;
}