Question

对于我的例子，我希望div为100％的高度设置动画，使其高于容器。这有效。但是我知道我希望动画div的右下角能够在容器的右上角转动。它从良好开始（在FF中），但随后动画div移动到容器下方，它应该与容器的右侧相邻。

    .container{
        margin: 10% auto;
        width: 900px;
        position: relative;
        background: red;
    }
    .wrapper{
        width: 100px;
        height: 200px;
        bottom: 0;
        right: 0;
    }
    .box{
        width: 100px;
        height: 200px;
        background: tomato;
        position: absolute;
        right: 0;
        /*transform: rotate(180deg);*/
        animation: rotateAnim 2s forwards;
        transform-origin : 100% 100%;
    }
    .hider{
        width: 100px;
        height: 200px;
        /*background: white;*/
        position: absolute;
        right: 0;
        z-index: 1;
    }

    @keyframes rotateAnim{
        50%{
            transform: translate(0%, -100%);
        }
        100%{
            transform: translate(0%, -100%);
            transform: rotate(180deg);
        }
    }

HTML：

<div class="container">
    <div class="wrapper">
        <div class="box">test</div>
        <div class="hider"></div>
    </div>

</div>

FIDDLE

Answer 1

好的，所以我已经弄明白了，从你的CSS的外观（你没有添加供应商前缀，并在Safari上没有工作。只是让你知道），你加了两倍的转换属性，第二个属性覆盖第一个属性，如果要添加两个转换个案，只需并排添加每个函数而不用逗号。

菜单以这种方式显示的原因是因为变换不会改变dom布局，或影响它周围的元素，它只是将原始元素保持原样，而你只看到像鬼一样将原始元素放入下一个位置。

现在有了这个解决方案，因为你要旋转元素180deg，元素会被向下推，所以你必须把它推高100％。

TL; DR：

@keyframes rotateAnim{
            50%{
                transform: translate(0%, -100%);
            }
            100%{
                transform: rotate(180deg) translate(0%, 100%);
            }
}

Answer 2

这样的东西？ http://jsfiddle.net/1wqzjfar/

transform-origin: right bottom;
transform: rotate(180deg);
transform-origin: 100% 50%;

您需要使用transform-origin为您的元素找到正确的“旋转中心”（在您的情况下，我认为是：'动画div可以像您所说的那样在容器的右上方转动）

麻烦旋转div使其在容器附近结束

2 个答案: