html - 无法旋转 div，使其在容器附近结束

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 上不起作用。只是让你知道)，你添加了两倍transform 属性和第二个属性覆盖第一个属性，如果你想添加两个转换案例，只需将每个函数并排添加而不用逗号。

菜单之所以这样显示，是因为 transform 不会改变 dom 布局，也不会影响它周围的元素，它只是将原始元素保持在原来的位置，你只会看到一个像鬼一样的东西将该原始元素移动到下一个位置。

现在有了解决方案，因为您将元素旋转 180 度，元素将被向下推，因此您必须将其向上推其大小的 100%。

长话短说:

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