CSS3 2D Transforms: Matrix Property

Here is the brief description of how to combine all the 2D transform methods into one in CSS3 using the CSS3 matrix() method.

Explanation

Property :

matrix()

Usage:


transform: matrix(1, -0.3, 0, 1, 0, 0);

Definition:

The matrix() method combines all the 2D transform methods into one. The matrix() method takes six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements:

Example :
<style>
.demodiv{
width: 250px;
height: 50px;
background-color: #9AFE2E;
border: 1px solid black;
transform: matrix(1, 0, 0.5, 1, 100, 0);
-ms-transform: matrix(1, 0, 0.5, 1, 100, 0); /* IE 9 */
-webkit-transform: matrix(1, 0, 0.5, 1, 100, 0); /* Safari */
}
</style>
<br> <div class='demodiv'>
This is an example for 2D Transform Matrix() property.
</div>

Result:

This is an example for 2D Transform Matrix() property.



Ask Questions

Ask Question