Css the problem of rotating the centered rectangle inside the box

Question

I'm planning to make an animated hamburger button. First of all, I made rectangles in the box. If rectangle rotate center in the box, rectangle does not rotating properly. For testing, I centered one of the rectangles and rotate 90 degrees. But rectangle doesn't fit in the box. How can I rotate properly rectangles center of the box?

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  background-color: #272B30;
}

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  
  width: 100vw;
  height: 100vh;
}

.boxes {
  width: 15rem;
  height: 15rem;
  background-color: #fff;
  position: relative;
}
.boxes .box {
  display: block;
  width: 15rem;
  height: 3rem;
  position: absolute;
}
.boxes .box__top {
  top: 0;
  background-color: #6f42c1;
}
.boxes .box__center {
  top: 50%;
  transform: translateY(-50%);
  transform-origin: center center;
  transform: rotate(90deg);
  background-color: #fd7e14;
}
.boxes .box__bottom {
  bottom: 0;
  background-color: #5bc0de;
}

<div class="wrapper">
  <div class="boxes">
    <!-- <span class="box box__top"></span> -->
    <span class="box box__center"></span>
    <!-- <span class="box box__bottom"></span> -->
  </div>
</div>

'transform: translateY(-50%) rotate(90deg);' is cool :) very thanks. — Ahmet Tuna POTUR, Jun 25 '19 at 19:44

score 0 · Answer 1 · answered Jun 24 '19 at 19:03

You could rotate the wrapper .boxes instead of .boxes .box__center, just like

.boxes {
  /* ... */
  transform: rotate(90deg);
}

OR you could use CSS calc() to fully centralize the element, just like:

.boxes .box__center {
  top: calc(50% - 1.5em);
  transform: rotate(90deg);
  background-color: #fd7e14;
}

Css the problem of rotating the centered rectangle inside the box

1 Answers1