---
title: "Image Skew using JavaScript and HTML"
description: "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."
author: "Vijay Shukla"
published: 2013-04-30
updated: 2019-11-16
canonical: https://www.mindstick.com/articles/1272/image-skew-using-javascript-and-html
category: "javascript"
tags: ["javascript"]
reading_time: 1 minute
---
# Image Skew using JavaScript and HTML
In this [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370) I am trying to make a Skew for X Axis [as well as](https://www.mindstick.com/forum/156547/difference-between-max-width-and-width-as-well-as-max-height-and-height) Y Axis using [JavaScript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) and [HTML](https://www.mindstick.com/articles/12368/why-are-html-themes-the-first-selection-of-designers) which is skew an [image](https://www.mindstick.com/articles/23551/an-investigate-distinctive-seafood-restaurant-for-your-image-stamp-character) in degrees.
##### HTML Code:
```
| |
Skew: X Axis: Y Axis: Skew image in X Axis 0 deg and in Y Axis 0 deg
```
##### Description:
Above line of HTML code have an image with height="150px" width="150px" and also have two [textboxes](https://www.mindstick.com/forum/34206/how-to-add-5-dynamic-textboxes-in-wpf-and-how-to-write-binding-in-c-sharp) for enter the [value](https://www.mindstick.com/articles/23219/an-optimized-description-adds-value-to-experience-and-in-turn-effectively-guest-posting-packages).
##### JavaScript Code:
```
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"; }
```
##### Output:
---
Original Source: https://www.mindstick.com/articles/1272/image-skew-using-javascript-and-html
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.