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>
Leave Comment