Анимация scaleX повернутого div

Question

У меня есть поворотный div, который длиннее, чем область просмотра, чтобы покрыть экран. Я использовал следующий код для центрирования DIV:

CSS

div { 
    position: absolute; 
    left:-25%; 
    height: 100%; 
    width: 150%; 
    transform: rotate(-75deg); 
    -ms-transform: rotate(-75deg); 
    -webkit-transform: rotate(-75deg); 
    background: red; 
} 

КОД: http://jsfiddle.net/9b8uLgw5/

Когда я пытаюсь оживить Scalex этого DIV с помощью TweenLite, то DIV выключен по центру. Я попытался использовать transformOrigin, но, похоже, не работает для меня.

КОД: http://jsfiddle.net/85s1hrfo/1/

Answer 1

Наконец-то выяснилось. Я должен был правильно установить transform-origin, top и right.

right: 0; 
top: -50%; 
transform-origin: right center; 

Затем я вычислил угол от верхнего правого угла div до нижнего левого угла, чтобы получить правильный угол преобразования.

var tAngle = -1 * Math.atan($('div.container').height()/$('div.container').width())*180/Math.PI) 
$('div.bg').css({ 
    'transform': 'rotate(' + tAngle + 'deg)' 
}) 

JS Fiddle с решением здесь (масштаб панели результатов и повторно запустить, чтобы увидеть эффект: http://jsfiddle.net/85s1hrfo/2/

Answer 2

ли this где-нибудь рядом с вашим желаемого результата?

Отрывок:

var myDIV = document.querySelector('div'); 
 
TweenLite.set(myDIV, { 
 
    backgroundColor: 'red', 
 
    position: 'absolute', 
 
    left: '50%', 
 
    top: '50%', 
 
    width: '150%', 
 
    height: '100%', 
 
    xPercent: -50, 
 
    yPercent: -125, 
 
    transformOrigin: '100% 100%', 
 
    rotation: -75 
 
}); 
 
TweenLite.fromTo(myDIV, 1, { scaleX: 0 }, { scaleX: 1 });

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 
 
<div></div>

Надеется, что это помогает в некотором роде, хотя.