在我的示例中,我希望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

html - 麻烦的div旋转,使其在容器附近结束-LMLPHP

最佳答案

好的,所以我已经从CSS的外观中弄清楚了(顺便说一句,您还没有添加供应商前缀,在Safari上也不起作用。只是让您知道),您要添加两倍的transform属性和第二个属性将覆盖第一个属性,如果要添加两个变换用例,只需将每个函数并排添加而不用逗号。

之所以显示菜单,是因为transform不会更改dom布局或影响其周围的元素,它只会将原始元素保留在原位置,而您只会看到该原始元素的幽灵元素进入下一个位置。

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

TL; DR:

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


html - 麻烦的div旋转,使其在容器附近结束-LMLPHP

10-05 20:37
查看更多