JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="polygon">
  <div class="side">1</div>
  <div class="side">2</div>
  <div class="side">3</div>
  <div class="side">4</div>
  <div class="side">5</div>
  <div class="side">6</div>
</div>

SCSS

body {
  margin: 10rem;
}

@keyframes spin {
  100% {
    transform: rotateX(360deg);
  }
}

.polygon {
  width: 100px;
  position: relative;
  height: 100px;
  perspective: 100px;
  transform-style: preserve-3d;
  //transform: rotateZ(60deg);
  animation: spin 5s linear infinite;

  .side {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #ddd;
    text-align: center;
    line-height: 100px;
    font-size: 4rem;
    border: 1px dotted #888;
  }

  @for $i from 1 through 8 {
    .side:nth-child(#{$i}) {
      transform: rotateX($i * 60deg) translateZ(100px);
    }
  }
}