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 是否接近您想要的结果？

<强> 段：

＆＃13;

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 });

＆＃13;

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

＆＃13;

希望这会有所帮助。

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在这里解决方案（缩放结果窗格并重新运行以查看效果：http://jsfiddle.net/85s1hrfo/2/

旋转div的动画scaleX

2 个答案: