旋转 div 的动画 scaleX

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/

当我尝试使用 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>

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

Answer 2

终于想通了。我必须正确设置 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/

旋转 div 的动画 scaleX

Animate scaleX of rotated div

jquery

html

css

gsap