HTML - CSS Rotate Div is Not Rotated 180 Deg

Question

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>

Add border-top:1px solid #f00 to your .box-inner-1. The rotate is working. — Jonathan
– Jonathan, Commented Oct 4, 2017 at 16:51

kww · Accepted Answer · 2017-10-04 16:50:54Z

2

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>

answered Oct 4, 2017 at 16:50

kww

5493 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mona Coder Over a year ago

Thanks a lots Kathy, this is exactly what I was looking for

Mateusz Kawka · Accepted Answer · 2017-10-04 16:50:17Z

0

Check transform-origin : center

answered Oct 4, 2017 at 16:50

Mateusz Kawka

4321 gold badge4 silver badges16 bronze badges

Comments

Johannes · Accepted Answer · 2017-10-04 16:58:05Z

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>

Collectives™ on Stack Overflow

HTML - CSS Rotate Div is Not Rotated 180 Deg

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related