CSS3 > Animations

Matrix method in CSS3

How to use matrix method in transformations using CSS


Matrix method 

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

 Views: 386 | Post Order: 107



Write for us