CSS 변환 수학 - 기울이기로 인한 div의 높이 계산

Question

기울이기 때문에 발생하는 div 컨테이너의 높이를 계산하는 데 어려움이 있습니다. plugin을 사용하여 컨테이너 안의 이미지를 마스킹하고 크기를 조정합니다.

컨테이너의 높이와 너비가 항상 같지는 않아 고정 된 치수를 사용하면 작동하지 않습니다. 나는 수학에 너무 좋지 않으므로 어떤 방향 으로든 도움이 될 것입니다.

내 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

이 솔루션을 사용하여 얻었습니다.

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

여기에도

당신을 도울 수

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

Answer 2

신경 끄시 고 수학은 빠른 테스트는 비율을 보여주는 것 같다.

-30deg로 기울어 진 100px 상자가 100x160px가됩니다.

100px 상자가 -20deg만큼 기울어 져 100x140px가됩니다.

-10deg로 비뚤어진 100px 상자가 100x120px가됩니다.

그래서 (abs (deg) * 2) %를 높이에 추가하는 것으로 보입니다. 따라서 -30deg로 기울이면 시작 높이를 총 높이 1.6, 높이 1.3을 한쪽으로, 또는 한쪽으로 0.3을 곱하면됩니다. 상단 여백 등을 오프셋)

Answer 3

두 기능을 선택하는 옵션을 내 업데이트 바이올린입니다.

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); 
} 

사용 (http://jsfiddle.net/x5her/18/) : 내가 필요로 그냥 어떤

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


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