8

div コンテナーをゆがめたために余分な高さを計算する方法がわかりません。コンテナ内の画像をマスキングし、プラグインを使用してサイズを変更しています。

コンテナーの高さと幅が常に同じであるとは限らないため、固定サイズを使用しても機能しません。

私のデモをご覧ください。 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 */         
}
4

5 に答える 5

8
スキューには、直角三角形のケースがあり、スキューの新しい幅は「反対側」に等しく、角度と反対があるので、この式によって隣接する反対側 = 隣接 * tan(角度); を得ることができます。反対に、skewX の場合は div の高さで、skewY の場合は div の幅になります

これをチェックしてください 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>

于 2019-02-18T11:01:36.943 に答える
5

このソリューションを使用して取得しました。

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/

于 2013-09-06T18:54:43.507 に答える
1

あなたを助けることができる2つの機能。

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]))
于 2013-09-06T19:10:21.310 に答える