CSS Tutorial – Transform-box: Fill-box

Rengga Dev – The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.

In the CSS we have an animation that uses a transform to rotate the rectangle infinitely. transform-box: fill-box is used to make the transform-origin the center of the bounding box, so the rectangle spins in place. Without it, the transform origin is the center of the SVG canvas, and so you get a very different effect.

<div class="Header">
  <svg class="Header__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1337.97 684.43">
    <path class="Header__shape bigSquare" fill="#16d5d1" d="M546.519 349.271l86.383-56.098 56.097 86.383-86.383 56.098z"/>
    <path class="Header__shape triangle" fill="none" stroke="#ff4676" stroke-width="8" d="M372.15 462.17L321 434.58l-4.88 56.16z"/>
    <circle class="Header__shape bigCircle" fill="#ff4676" cx="1076.52" cy="262.17" r="59"/>
    <path class="Header__shape littleSquare" fill="#ffe430" d="M285.523 262.61l12.372-53.59 53.59 12.372-12.372 53.59z"/>
    <circle class="Header__shape hoop" fill="none" stroke="#ffe430" stroke-width="13" cx="905.52" cy="447.17" r="45"/>
    <circle class="Header__shape littleCircle" fill="#0f1c70"cx="1036.52" cy="203.17" r="27"/>
  </svg>
  <h3 class="Header__title">Transform-box:fill-box</h3>
</div>

 // I was rotating an SVG shape within a larger SVG when I noticed that the shape was taking the center of the SVG viewbox as the origin of the transformation rather than its own center. To fix this add transform-box: fill-box to the shape you're rotating.

// https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box

.Header__shape {
  animation-duration: 4s;
  animation-timing-function: cubic-bezier(.18,1.17,.03,1.46);
  animation-fill-mode: backwards;
  transform-origin: center;
  // this here is the good stuff
  transform-box: fill-box;
}


// aaand the rest of the code

body {
  background: radial-gradient(#c2c2c2 8%, transparent 8%), white;
  background-position: 0 0, 25px 25px;
  background-size:25px 25px;
  min-height: 100vh;
}

.Header {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Header__svg {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  will-change: transform;
}
.Header__title {
  font-family: Avenir, Futura, 'Open Sans', 'Gill Sans', 'Helvetica Neue', Ariel, sans-serif;
  font-weight: bold;
  font-size: 6vw;
  margin: 0;
}

.bigSquare {
  animation-name: bigSquare;
}
@keyframes bigSquare {
  from { transform: translateY(10%) rotate(-80deg) scale(0); }
  to { transform: translateY(0) rotate(0deg) scale(1); }
}
.littleSquare {
  animation-name: littleSquare;
}
@keyframes littleSquare {
  from { transform: translate(226%, 183%) rotate(140deg) scale(0) ; }
  to { transform: translate(0%, 0%) rotate(0deg) scale(1); }
}
.triangle {
  animation-name: triangle;
}
@keyframes triangle {
  from { transform: rotate(-140deg) scale(0) ; }
  to { transform: rotate(0deg) scale(1); }
}
.hoop {
  animation-name: hoop;
}
@keyframes hoop {
  from { transform: translate(-160%, -33%) scale(0) ; }
  to { transform: translate(0%, 0%) scale(1); }
}
.bigCircle {
  animation-name: bigCircle;
}
@keyframes bigCircle {
  from { transform: scale(0) translate(60%, 3%); }
  to { transform: scale(1) translate(0%, 0%); }
}
.littleCircle {
  animation-name: littleCircle;
}
@keyframes littleCircle {
  from { transform: scale(0) }
  to { transform: scale(1) }
}

// some lovely sass fun to stagger the animation

@for $i from 1 to 12 {
  .Header__shape:nth-child(#{$i}) { 
    animation-delay: $i * 0.16s;
  }
}