CSS

css box

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

box css example

<style>
body {
  background: #0005;
  display: grid;
  place-content: center;
  min-height: 100vh;
  overflow: hidden;
  perspective: 800px;
}
.wrap {
  position: relative;
  margin: 0 auto;
  display: grid;
  place-content: center;
  width: 50vw;
  height: 50vw;
  background: #0202;
  transform-style: preserve-3d;
  transform: translate(0, 0%) translate3d(0, 0, 0) rotate3d(1, 1, 1, 45deg);
  // animation: spin 1s ease forwards infinite;
}
.side {
  position: absolute;
  transform-style: preserve-3d;
  transform-origin: center;
  width: 5rem;
  height: 5rem;
  background: #0005;
  left: 50%;
  top: 50%;
  transform: translate(0, 0%) translate3d(0, 0, 0) rotate3d(1, 1, 0, 45deg);
}
.side:nth-child(1) {
  transform: rotatey(0deg) translate(-50%, -50%) translate3d(0, 0, -5rem);
  background: hsla(50, 60%, 60%, 1);
}
.side:nth-child(2) {
  transform: translate(-50%, -50%) translate3d(0, 50%, -2.5rem)
    rotate3d(1, 0, 0, 90deg);
  background: hsla(100, 60%, 60%, 1);
}
.side:nth-child(3) {
  transform: translate(-50%, -50%) translate3d(0, -50%, -2.5rem)
    rotate3d(1, 0, 0, -90deg);
  background: hsla(140, 60%, 60%, 1);
}
.side:nth-child(4) {
  transform: translate(-50%, -50%) translate3d(50%, 0, -2.5rem)
    rotate3d(0, 1, 0, 90deg);
  background: hsla(180, 60%, 60%, 1);
}
.side:nth-child(5) {
  transform: translate(-50%, -50%) translate3d(-50%, 0, -2.5rem)
    rotate3d(0, 1, 0, -90deg);
  background: hsla(210, 60%, 60%, 1);
}
.side:nth-child(6) {
  transform: rotatex(0deg) translate(-50%, -50%) translate3d(0, 0, 0rem)
    rotate3d(0, 0, 0, -90deg);
  background: hsla(250, 60%, 60%, 1);
}
@keyframes spin {
  to {
    transform: translate(-50%, -50%) translate3d(0, 0, 0)
      rotate3d(1, 0, 0, 45deg);
  }
}

</style>
//////// HTML
<div class="wrap">
  <div class="side a"></div>
  <div class="side b"></div>
  <div class="side c"></div>
  <div class="side d"></div>
  <div class="side e"></div>
  <div class="side f"></div>
</div>

div box

<div class="box">...</div>
<section>...</section>