Question

我正在尝试从框.box-inner-1的底部到顶部添加填充动画，但CSS旋转无法正常工作！

＆＃13;

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

＆＃13;

.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);

}

＆＃13;

<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>

＆＃13;

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

检查transform-origin：center

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>

HTML - CSS旋转Div未旋转180度

3 个答案: