CSS Transform Math - 计算由skew引起的div高度 [英] CSS Transform Math - Calculate height of div caused by skew

问题描述

我很难弄清楚如何计算因倾斜而导致的div容器的额外高度。我正在屏蔽容器内的图像并使用插件。

I'm having difficulty figuring out how I could calculate the extra height of a div container caused by skewing it. I am masking an image inside the container and resizing it using a plugin.

容器的高度和宽度并不总是相同，因此使用固定尺寸将不起作用。我对数学不太了解，所以任何方向或帮助我都会很感激。

The containers will not always have the same height and width so using fixed dimensions will not work. I'm not very good with math, so any direction or help I would appreciate.

请参阅我的演示。
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 */         
}

推荐答案

我使用此解决方案。

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/

这篇关于CSS Transform Math - 计算由skew引起的div高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！