The matrix() method combines all the 2D transform methods into one. The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements. To get a better idea of how the matrix works, take a look at these samples. The syntax can look like this:
transform: matrix(1, -0.3, 0, 1, 0, 0);
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv1 { -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */ -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */ transform: matrix(1, -0.3, 0, 1, 0, 0); } div#myDiv2 { -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */ -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */ transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */ } </style> <body>> <p>The matrix() method combines all the 2D transform methods into one.</p> <div> This a normal div element. </div> <div id="myDiv1"> Using matrix(1, -0.3, 0, 1, 0, 0) </div> <div id="myDiv2"> Using matrix(1, 0, 0.5, 1, 150, 0) </div> </body> |
The matrix() method combines all the 2D transform methods into one.
This a normal div element.
Using matrix(1, -0.3, 0, 1, 0, 0)
Using matrix(1, 0, 0.5, 1, 150, 0)
|
There seems to be a lot of mathematical calculations needed to do the matrix and it's even more complicated with the 3d matrix! There are lots of online matrix calculators that will write the source for you, such as this one. There are lots of tutorials too, but for me, the extra mindbending is just not worth it!
