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:
    <table cellpadding="15" cellspacing="15">
                <img src=""id="imgTag"
                    height="150px" width="150px" border="1" />
    <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

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=='') {
            if (value2=='') {
            document.getElementById('imgTag').style.msTransform ="skew("+value1 +"deg,"+value2 +"deg)";
            document.getElementById('imgTag').style.OTransform ="skew("+value1 +"deg,"+value2 +"deg)";
            document.getElementById('span1').innerHTML=value1+" deg";
            document.getElementById('span2').innerHTML=value2+" deg";

Image Skew using JavaScript and HTML

  Modified On Nov-29-2017 08:47:13 PM

Leave Comment