HTML-CSS Rotate Div不旋轉180度

Question

我正在嘗試從框.box-inner-1底部到頂部添加填充動畫，但是CSS Rotate無法正常工作！

 $('.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

通過將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 2

檢查轉換原點：中心

Answer 3

實際上，它是旋轉的，但是從一開始就是正確的-請參閱我的代碼段，在其中我向該DIV中添加了一些內容，這些內容顛倒顯示。 不確定您所表達的內容-旋轉沒有動畫效果，以防萬一，您不會在任何地方設置它（？）

 $('.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>