CODEWITHSUNDEEP
javascripthtmlcss
Mona Coder
Mona Coder

Reputation: 6316

HTML - CSS Rotate Div is Not Rotated 180 Deg

I am trying to add Fill animation from bottom to top of the box .box-inner-1 but CSS Rotate is not working properly!

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

Upvotes: 0

Views: 247

Answers (3)

Johannes
Johannes

Reputation: 67798

In fact it is rotated, but right from the beginning - see my snippet, where I added some content to that DIV which is displayed upside down. Not sure what you expact - the rotation isn't animated, in case you expacted that - you don't set that anywhere (?)

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

Upvotes: 0

kww
kww

Reputation: 549

You can get the box to animate from the bottom to top by changing top: '0' to 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>

Upvotes: 2

Mateusz Kawka
Mateusz Kawka

Reputation: 422

Check transform-origin : center

Upvotes: 0

Related Questions