Question

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

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

根据窗口大小确定所有内容。通过将屏幕划分为三分之一（减去容器div外的像素）来创建带有文本的内容块以用于宽度。内容div的高度将由其内容定义。要设置位置...使用我之前做的数学，将它从窗口左侧定位到屏幕的三分之二，并从顶部开始以自己的高度* 2（以像素为单位）。

因为我使用的是-webkit-transform：skew（-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>

注意：对我以前的糟糕帖子道歉。我发现这非常难以正确解释......我希望我的第二次尝试更清楚。

Answer 1

如果您旋转线条而不是倾斜它们，并设置适当的transform-origin，您的代码将正常工作。原点y应与内容div的顶部相同。

只需将此添加到您的css：

.right.lean-forward {
    -webkit-transform: rotate(15deg);
    -webkit-transform-origin: 0 361px;    
}

.slide-content.one.lean-forward {
    -webkit-transform-origin: 0 0;    
}

演示jsfiddle。

注意：旋转的线条未覆盖整个图像高度，因此您可能需要在scaleY之后添加rotate变换以使其更长。

编辑：您可以像这样设置变换原点（new fiddle）：

$('.lines .right').css('transform-origin', '0 ' + bottomLinePos + 'px');

奇怪的数学与歪斜

1 个答案: