Online: 17949
Online: 17949
Online: 17949
It combines all transformations in to one, syntax of matrix method
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
<style>
div {
width: 200px;
height: 50px;
border: 2px solid blue;
}
div#myDiv1 {
-webkit-transform: matrix(1, 0.3, 0, 1, 0, 0);
-moz-transform: matrix(1, 0.3, 0, 1, 0, 0);
}
div#myDiv2 {
-webkit-transform: matrix(1, 0, -0.3, 1, 0, 0);
-moz-transform: matrix(1, 0, -0.3, 1, 0, 0);
}
</style>
</head>
<body>
<p><i>Matrix method</i></p>
<div style="background-color:darkmagenta">
Normal method
</div>
<div id="myDiv1" style="background-color:green">
using Matrix method
</div>
<div id="myDiv2" style="background-color:pink">
using Matrix method.
</div>
</body>
In the above code snippet we have defined the matrix method which uses all the transformations in one place , we have created three boxes one is normal box and two boxes are created by matrix method which uses skew,scale, translate method to create matrix method
output
