articles

Home / DeveloperSection / Articles / Image Skew using JavaScript and HTML

Image Skew using JavaScript and HTML

Vijay Shukla14284 30-Apr-2013

In this article I am trying to make a Skew for X Axis as well as Y Axis using JavaScript and HTML which is skew an image in degrees.

HTML Code:
<body>
    <table cellpadding="15" cellspacing="15">
        <tr>
            <td>
                <img src="http://www.mindstick.com/Employeesection/Image/Multi_purpose.png"id="imgTag"
                    height="150px" width="150px" border="1" />
            </td>
        </tr>
    </table>
    <br />
    <b>Skew:</b><br />
    <b>X Axis:</b><input type="text" id="t1" /><br />
    <b>Y Axis:</b><input type="text" id="t2" /><br />
    <input type="button" value="Click to Skew" onclick="rotator(t1.value, t2.value)" /><br />
    Skew image in X Axis <b><span id="span1">0 deg</span></b> and in Y Axis <b><span id="span2">0
        deg</span></b>
</body>
Description:

Above line of HTML code have an image with height="150px" width="150px" and also have two textboxes for enter the value.

JavaScript Code:
<script type="text/javascript">
        function rotator(value1,value2) {
            if (value1=='') {
                value1=0;
            }
            if (value2=='') {
                value2=0;
            }
            document.getElementById('imgTag').style.webkitTransform="skew("+value1+"deg,"+value2+"deg)";
            document.getElementById('imgTag').style.msTransform ="skew("+value1 +"deg,"+value2 +"deg)";
            document.getElementById('imgTag').style.MozTransform="skew("+value1+"deg,"+value2+"deg)";
            document.getElementById('imgTag').style.OTransform ="skew("+value1 +"deg,"+value2 +"deg)";
            document.getElementById('imgTag').style.transform="skew("+value1+"deg,"+value2+"deg)";
            document.getElementById('span1').innerHTML=value1+" deg";
            document.getElementById('span2').innerHTML=value2+" deg";
        }
    </script>
Output:

Image Skew using JavaScript and HTML


Updated 16-Nov-2019

Leave Comment

Comments

Liked By