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

Image Skew using JavaScript and HTML


JavaScript JavaScript 
Ratings:
0 Comment(s)
 8044  View(s)
Rate this:

Image Skew using JavaScript and HTML

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:

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.


Don't want to miss updates? Please click the below button!

Follow MindStick