旋转div的scaleX动画

Question

I have a rotated div that is longer than the viewport to cover the screen. I used the following code to center the div:

CSS

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

CODE: http://jsfiddle.net/9b8uLgw5/

When I try to animate the scaleX of that div using TweenLite, the div is off centered. I have tried using transformOrigin, but is does not seem to work for me.

CODE: http://jsfiddle.net/85s1hrfo/1/

Answer 1

Is this anywhere near your desired outcome?

Snippet:

 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> 

Hope this helps in some way though.

Answer 2

Finally figured it out. I had to set the transform-origin , top , and right properties properly.

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

Then I calculated the angle from the top right corner of the div to the bottom left in order to get a proper transform angle.

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

JS Fiddle with the solution here (scale the result pane and re-run to see the effect: http://jsfiddle.net/85s1hrfo/2/