jquery - 旋转 div 的动画 scaleX

Question

我有一个旋转的 div，它比视口(viewport)长以覆盖屏幕。我使用以下代码将 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/

当我尝试使用 TweenLite 为该 div 的 scaleX 设置动画时，该 div 偏离中心。我尝试过使用 transformOrigin，但似乎对我不起作用。

代码:http://jsfiddle.net/85s1hrfo/1/

Answer 1

是 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>

希望这能在某种程度上有所帮助。