Skew animation in CSS3

How to skew the element to a certain degree in CSS3?

By using Skew Property we can skew the element to a certain degree. (Skew accepts rotate angle as well as skew angle).

<style>
        ul.myGallery li {
            float: left;
            list-style: none;
            border: 1px solid #c0c0c0;
            -webkit-transition: -webkit-transform 0.5s ease-in-out;
            -moz-transition: -moz-transform 0.5s ease-in-out;
            transition: transform 0.5s ease-in-out;
        }

            ul.myGallery li:hover {
                -webkit-transform: scale(1.5) skew(-10deg, 45deg);
                -moz-transform: scale(1.5) skew(-10deg, 45deg);
                -o-transform: scale(1.5) skew(-10deg, 45deg);
                transform: scale(1.5) skew(-10deg, 45deg);
                -webkit-box-shadow: 4px 4px 10px red;
                -moz-box-shadow: 4px 4px 10px red;
                box-shadow: 4px 4px 10px red;
            }
    </style>

<body>
    <ul class="myGallery" style="padding-top:150px">
        <li>
            <img src="../dotnetfunda.png" /></li>
        <li>
            <img src="../itfunda.gif" /></li>
        <li>
            <img src="../dotnetfunda.png" /></li>
        <li>
            <img src="../itfunda.gif" /></li>
    </ul>
</body>

In the above code snippet, transform has scale as well as skew css style property.

Skew accepts two parameters