HTML - CSS旋转Div 180度不旋转

Question

我想添加从底部到顶部的填充动画.box-inner-1但CSS旋转不能正常工作！

$('.box-inner-1').css({ 
 
    top: '0' 
 
}).animate({ 
 
    "height": 260 
 
}, 4000);

.wrapper { 
 
    position: relative; 
 
    height: 260px; 
 
    width: 260px; 
 
    padding: 0px !important; 
 
    background: #ddd; 
 
} 
 
.box-inner-1 { 
 
    position: absolute; 
 
    height: 0px; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: greenyellow; 
 
    -ms-transform: rotate(-180deg); 
 
    -webkit-transform: rotate(-180deg); 
 
    transform: rotate(-180deg); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="box-inner-1"></div> 
 
</div>

Answer 1

入住变换产地：中心

Answer 2

你可以框从底部动画通过改变top: '0'到bottom: '0'顶部。

$('.box-inner-1').css({ 
 
    bottom: '0' 
 
}).animate({ 
 
    "height": 260 
 
}, 4000);

.wrapper { 
 
    position: relative; 
 
    height: 260px; 
 
    width: 260px; 
 
    padding: 0px !important; 
 
    background: #ddd; 
 
} 
 
.box-inner-1 { 
 
    position: absolute; 
 
    height: 0px; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: greenyellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="box-inner-1"></div> 
 
</div>

Answer 3

事实上，是旋转，但是从一开始 - 看到我的片段，我在那里增加了一些内容，其中显示颠倒该DIV。不知道你什么expact - 旋转没有设置动画，如果你expacted - 你没有设置任何地方

$('.box-inner-1').css({ 
 
    top: '0' 
 
}).animate({ 
 
    "height": 260 
 
}, 4000);

.wrapper { 
 
    position: relative; 
 
    height: 260px; 
 
    width: 260px; 
 
    padding: 0px !important; 
 
    background: #ddd; 
 
} 
 
.box-inner-1 { 
 
    position: absolute; 
 
    height: 0px; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: greenyellow; 
 
    -ms-transform: rotate(-180deg); 
 
    -webkit-transform: rotate(-180deg); 
 
    transform: rotate(-180deg); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="box-inner-1">look here</div> 
 
</div>