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>