数学有偏差

我有一个幻灯片需要构建。这个flash动画最终是我想要实现的：http://ne.matthewjonat.com/assets/NE_Animation.swf

我已经开始使用1px宽的div来构建它。但为了给它们提供偏斜效果，我使用了CSS3-webkit transform:s偏斜（-15deg）参数。

所有东西都将根据窗口大小进行定位。为了创建带有文本的内容块，我首先将屏幕分成三分之一（减去容器div外的像素）来用作宽度。内容div的高度将由其内容定义。要设置位置。。。使用我之前做的数学计算，将其定位在距离窗口左侧屏幕三分之二的位置，以及其自身的高度*2（以像素为单位）。

因为我使用的是-webkit转换：偏斜（-15deg）；div不再与行匹配。我需要计算出div移动多少像素，以便它与中线匹配。有没有一种方法可以计算出div在屏幕上相对于倾斜元素的位置？

我使用的代码如下：

尽管您可以在此处看到更好的版本：http://ne.matthewjonat.com/for-dev

$(document).ready(function(){
	var $wHeight = $(window).height(),
		$wWidth = $(window).width(),
		hMinusMenu = $wHeight - 77,
		$slideContent = $('.slide-content.one');
	//console.log(hMinusMenu);
	$('.slide-bg, .lines').height(hMinusMenu);
	
	//set width of slide content box
	var slideContentWidth = $wWidth / 3;
	$slideContent.width(slideContentWidth);
	
	//get width of outside container
	var outerWidth = ($wWidth - $('.container').width()) / 2,
		slideTxtTop = (hMinusMenu / 2) - $slideContent.height();
		
	//position lines
	var rightLinePos = $slideContent.outerWidth() + outerWidth;
		bottomLinePos =  $slideContent.outerHeight() + slideTxtTop,
		topLinePos = slideTxtTop - 1;
	$('.lines .right').height(hMinusMenu).css('left', rightLinePos);
	$('.lines .bottom').css('top', bottomLinePos);
	$('.lines .top').css('top', topLinePos);
	$('.lines .left').height(hMinusMenu).css('left', outerWidth);
	
	//position first slide content accordingly
	$slideContent.css('left', rightLinePos).css('top', bottomLinePos + 1);
	
	//position second slide-content
	
	
	//move out right line
	$('.lines .right.move-out-right').css('display','block').css('top',bottomLinePos - 20).animate({
		'left':'+='+slideContentWidth
	},600, function(){
		$('.slide-content.one').fadeIn();
		//setTimeout(function(){ alert("Hello"); }, 3000);
	});
	
});

.lean-forward{
	-webkit-transform: skew(-15deg);
   	-moz-transform: skew(-15deg);
   	-o-transform: skew(-15deg);
}
.lean-back{
	-webkit-transform: skew(15deg);
   	-moz-transform: skew(15deg);
   	-o-transform: skew(15deg);
}
.slide-container{
	position:relative;
	width:100%;
	margin-top:77px;
}
.slide-content{
   	padding:20px;
   	position:absolute;
   	display:none;
}
.slide-content .title{
	font-size:30px;
	font-weight:bold;
}
.slide-content .text{
	font-size:18px;
}
.slide-content p{
	color:#FFF;
	-webkit-transform: skew(15deg);
   	-moz-transform: skew(15deg);
   	-o-transform: skew(15deg);
}
.slide-content.one{
	background-color:rgba(112,1,1,0.5);
}
.slide-content.two{
	background-color:rgba(51,204,153,0.5);
}
.slide-content.three{
	background-color:rgba(196,16,57,0.5);
}
.slide{
	display:none;
}
.slide.active{
	display:block;
}
.lines{
	position:absolute;
	width:100%;
	overflow:hidden;
}
.lines .right, .lines .left, .lines .top, .lines .bottom{
	position:absolute;
	background-color:#fff;
}
.lines .right, .lines .left{
	width:1px;
}
.lines .top, .lines .bottom{
	height:1px;
	width:100%;
}
.lines .left, .lines .right.move-out-right, .lines .right.move-out-left{
	display:none;
}
.lines .right.move-out-right{
	bottom:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slide-container">
			<div class="lines">
				<div class="top"></div>
				<div class="right lean-forward"></div>
				<div class="right move-out-right lean-forward"></div>
				<div class="right move-out-left lean-forward"></div>
				<div class="bottom"></div>
				<div class="left lean-forward"></div>
			</div>
			<div class="slide active slide-bg" style="background-image:url('http://ne.matthewjonat.com/assets/images/slides/1.jpg');">
				<div class="slide-content one lean-forward">
					<p><span class="title">Technically-rigorous*</span><br />
					<span class="text">Building your legacy is priceless, leaving a future for your family is the most important gift you can give.</span></p>
				</div>		
			</div>
			<div class="slide slide-bg" style="background-image:url('assets/images/slides/2.jpg');">
				<div class="slide-content two lean-forward">
					<p><span class="title">Legacy-oriented*</span><br />
					<span class="text">Building your legacy is priceless, leaving a future for your family is the most important gift you can give.</span></p>
				</div>		
			</div>
			<div class="slide slide-bg" style="background-image:url('assets/images/slides/3.jpg');">
				<div class="slide-content three lean-forward">
					<p><span class="title">Creatively-inspired*</span><br />
					<span class="text">Building your legacy is priceless, leaving a future for your family is the most important gift you can give.</span></p>
				</div>		
			</div>
		</div>

注：为我之前的糟糕帖子道歉。我只是觉得这很难解释。。。我希望我的第二次尝试更加清晰。