HTML - CSS旋转Div未旋转180度

时间:2017-10-04 16:44:50

标签: javascript html css css3

我正在尝试从框.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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

检查transform-origin:center

答案 2 :(得分:0)

实际上已经旋转了,但是从一开始就是这样 - 请参阅我的代码片段,在那里我向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>