Wierd maths with skew

Question

У меня есть слайд-шоу, которое мне нужно построить. Эта флеш-анимация, в конечном счете, я хочу достичь: http://ne.matthewjonat.com/assets/NE_Animation.swf

Я начал строить ее, используя 1px широкий divs для линий. но чтобы дать им эффект перекоса, я использую параметр CSS3 -webkit-transform: skew (-15deg).

Все будет размещено в соответствии с размером окна. для создания блока содержимого с текстом, который я начал, деля экран на трети (минус пиксели за пределами контейнера div) для использования для ширины. Высота содержимого div будет определяться его содержимым. Чтобы установить позицию ... используйте математику, которую я сделал ранее, чтобы разместить ее на 2/3 экрана слева от окна, а также свою собственную высоту * 2 в пикселях сверху.

Потому что я использую -webkit-transform: skew (-15deg); div больше не совпадает с линией. Мне нужно выяснить, сколько пикселей будет перемещать div, чтобы оно соответствовало средней линии. Есть ли способ выработать позицию divs на экране относительно перекошенного элемента?

код я использую для этого заключается в следующем:

хотя вы можете увидеть лучший вариант здесь: http://ne.matthewjonat.com/for-dev

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

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

 
.slide{ 
 
\t display:none; 
 
} 
 
.slide.active{ 
 
\t display:block; 
 
} 
 

 
.lines{ 
 
\t position:absolute; 
 
\t width:100%; 
 
\t overflow:hidden; 
 
} 
 
.lines .right, .lines .left, .lines .top, .lines .bottom{ 
 
\t position:absolute; 
 
\t background-color:#fff; 
 
} 
 
.lines .right, .lines .left{ 
 
\t width:1px; 
 
} 
 
.lines .top, .lines .bottom{ 
 
\t height:1px; 
 
\t width:100%; 
 
} 
 
.lines .left, .lines .right.move-out-right, .lines .right.move-out-left{ 
 
\t display:none; 
 
} 
 
.lines .right.move-out-right{ 
 
\t bottom:0; 
 
}

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

ПРИМЕЧАНИЕ: Извинения для бедных пост I ранее. Я просто считаю, что это невероятно сложно объяснить правильно ... Надеюсь, моя вторая попытка более ясна.

Answer 1

Если вы поворачиваете линии, вместо их перекоса и устанавливаете соответствующий transform-origin, ваш код будет работать нормально, как есть. Начало y shoud будет таким же, как верхняя часть содержимого div.

Просто добавьте в ваш CSS:

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

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

Demo jsfiddle.

Примечание: повернутая линия не покрывает полную высоту изображения, поэтому вы можете добавить трансформацию scaleY после rotate, чтобы сделать ее более длинной.

Edit: Вы можете установить преобразование происхождения, как это (new fiddle):

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