CSS Transform Math - Calculates div height caused by skew

Question

I find it difficult to understand how I can calculate the extra height of the div container caused by skew. I mask the image inside the container and resize it using a plugin .

Containers will not always have the same height and width, so using fixed sizes will not work. I am not very good at math, so I would appreciate any direction or help.

See the demo. http://jsfiddle.net/RyU9W/6/

HTML

<div id="profiles" class="container"> <div class="profile"> <div class="image"> <img src="http://placekitten.com/g/750/750" alt=""> </div> <div class="detail"> </div> </div> <div class="profile"> <div class="image"> <img src="http://placekitten.com/g/750/750" alt=""> </div> <div class="detail"> </div> </div> <div class="profile"> <div class="image"> <img src="http://placekitten.com/g/750/750" alt=""> </div> <div class="detail"> </div> </div> <div class="profile"> <div class="image"> <img src="http://placekitten.com/g/750/750" alt=""> </div> <div class="detail"> </div> </div> <div class="profile"> <div class="image"> <img src="http://placekitten.com/g/750/750" alt=""> </div> <div class="detail"> </div> </div> <div class="profile"> <div class="image"> <img src="http://placekitten.com/g/750/1200" alt=""> </div> <div class="detail"> </div> </div> </div> 

CSS

 #profiles { margin-top: 300px; transform:skewY(-30deg); -ms-transform:skewY(-30deg); /* IE 9 */ -webkit-transform:skewY(-30deg); /* Safari and Chrome */ } .profile { cursor: pointer; float: left; width: 32.25%; margin: 0.5%; position: relative; } .profile .image { position: relative; overflow: hidden; height: 400px; background: #000; backface-visibility:hidden; -webkit-backface-visibility:hidden; /* Chrome and Safari */ -moz-backface-visibility:hidden; /* Firefox */ -ms-backface-visibility:hidden; /* Internet Explorer */ } .profile .image * { position: relative; transform:skew(0deg,30deg); -ms-transform:skew(0deg,30deg); /* IE 9 */ -webkit-transform:skew(0deg,30deg); /* Safari and Chrome */ } 

Answer 1

I took advantage of 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 a choice of degrees

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

Answer 2

Ignore the math, a quick test seems to show proportions.

A 100px column skewed by -30deg becomes 100x160px.

A box of 100 pixels, skewed to -20deg, becomes 100x140px.

A 100px column skewed by -10deg becomes 100x120px.

So it seems that (abs (deg) * 2)% is added to the height. Therefore, if you are tilted by -30deg, multiply the starting height by 1.6 for the total height, 1.3 for just the height + one side, or 0.3 for just the shift on one side (i.e. if you are trying to figure out how much far to compensate for the top edge or such)

Answer 3

Two features that can help you.

 function matrixToArray(matrix) { return matrix.substr(7, matrix.length - 8).split(', '); } function getAdjustedHeight(skewedObj){ var jqElement = $(skewedObj); var origWidth= jqElement.width(); var origHeight= jqElement.height(); var matrix = matrixToArray(jqElement.css('transform')) var alpha = matrix[2]; var adjusted = Math.sin(alpha)*origWidth/Math.sin(Math.PI/2-alpha); return origHeight+Math.abs(adjusted); } function getAdjustedWidth(skewedObj){ var jqElement = $(skewedObj); var origWidth= jqElement.width(); var origHeight= jqElement.height(); var matrix = matrixToArray(jqElement.css('transform')) var alpha = matrix[1]; var adjusted = Math.sin(alpha)*origHeight/Math.sin(Math.PI/2-alpha); return origWidth+Math.abs(adjusted); } 

Usage ( http://jsfiddle.net/x5her/18/ ):

  // if you use scewY console.log(getAdjustedWidth($(".image")[0])) // if you use scewX console.log(getAdjustedHeight($(".image")[0]))