无法旋转 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

是这样的吗？ http://jsfiddle.net/1wqzjfar/

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

您需要使用 transform-origin 为您的元素找到正确的 "centre of rotation"（在您的情况下我认为是：如您所说的 'animated div to pivot against the top right of the container'）

Answer 2

好的，所以我已经弄清楚了，从你的 CSS 的外观来看（顺便说一句，你没有添加供应商前缀，并且在 Safari 上不起作用。只是让你知道），您添加了两次转换属性并且第二个属性覆盖了第一个，如果您想添加两个转换案例，只需将每个函数并排添加而不用逗号。

菜单之所以这样显示，是因为变换不会改变 dom 布局，也不会影响它周围的元素，它只是将原始元素保持在原来的位置，而你只看到那个原始元素的幽灵进入下一个位置。

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

长话短说：

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

无法旋转 div 以使其在容器附近结束

Trouble rotating div so that it ends adjacent to container

html

css

rotation