CSS Transform Math - Calculate height of div caused by skew

I got it using this solution.

var degrees = 30;
var radians= degrees*Math.PI/180;
var newHeight = parentWidth*Math.tan(radians);
var newOffset = newHeight / 2;
var parentHeight = parentHeight + newHeight;

Here is my updated fiddle with option to select degrees

http://jsfiddle.net/bhPcn/5/


In skew we have a case of Right-angled triangle and the skew new width is equal to "Opposite" and we've the angle and the opposite so by this equation we can get the adjacent Opposite = Adjacent * tan(angle); Where opposite in case of skewX is the div height and in case of skewY will be the div width

Check this https://codepen.io/minaalfy/pen/exgvjb

function calculateSkew(){
  var el = document.getElementById('bluebox');
  var skewX = document.getElementById('skewX');
    skewX.value = skewX.value || 0;
  var skewY = document.getElementById('skewY');
    skewY.value = skewY.value || 0;
    
  var yRadians = skewY.value * Math.PI / 180;
  var newHeight = el.offsetWidth * Math.tan(yRadians);
  var calculatedHeight = el.offsetHeight + newHeight;
  
  var xRadians = skewX.value * Math.PI / 180;
  var newWidth = calculatedHeight * Math.tan(xRadians);
  var calculatedWidth = el.offsetWidth + newWidth;
  
  el.style.transform = ("skewX(" + skewX.value + "deg ) skewY(" + skewY.value  + "deg )");
  var output = document.getElementById('output');
  output.innerHTML = "skewY by "+skewY.value+ " and new height calculated is "+calculatedHeight+ "<br> skewX by "+skewX.value+ " and the new calculated width is "+ calculatedWidth;
}
body {text-align:center}
#bluebox {width:100px;height:100px;background:blue;margin: 20px auto;}
<h4>Enter any numeric value for skewX or skewY to calculate the new width&height for the box</h4>
<div id="bluebox"></div>
<input type="number" placeholder="skewX" id="skewX" onkeyup="calculateSkew()" />
<input type="number" placeholder="skewY" id="skewY" onkeyup="calculateSkew()" />
<h1 id="output"></h1>

Tags:

Javascript

Css

Jquery

Math

Recent Posts