HTML - CSSの回転ディビジョンが180度回転していない

Question

ボックスの下から上に塗りつぶしアニメーションを追加しようとしていますが、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

あなたはボックスがbottom: '0'にtop: '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>