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 a block element?

<div>Web Programming and Development</div>

Which CSS code displays the text underlined?

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

h2 {
  text-decoration: underline;
}

Click on the JavaScript function that can access other function after a specified time.

insertBefore() setTimeout() querySelector()

function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);

Click on the instruction that returns the number of items of a multidimensional array in PHP.

count($array) count($array, 1) strlen()

$food =["fruits" =>["banana", "apple"), "veggie" =>["collard", "pea"));
$nr_food = count($food, 1);
echo $nr_food;       // 6