在我的示例中,我希望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
最佳答案
好的,所以我已经从CSS的外观中弄清楚了(顺便说一句,您还没有添加供应商前缀,在Safari上也不起作用。只是让您知道),您要添加两倍的transform属性和第二个属性将覆盖第一个属性,如果要添加两个变换用例,只需将每个函数并排添加而不用逗号。
之所以显示菜单,是因为transform不会更改dom布局或影响其周围的元素,它只会将原始元素保留在原位置,而您只会看到该原始元素的幽灵元素进入下一个位置。
现在有了该解决方案,由于您将元素旋转了180度,因此元素将被向下推动,因此您必须将其向上推动其大小的100%。
TL; DR:
@keyframes rotateAnim{
50%{
transform: translate(0%, -100%);
}
100%{
transform: rotate(180deg) translate(0%, 100%);
}
}