JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<ul class="wheel">
  <li>Lorem.</li>
  <li>asdjk.</li>
</ul>

SCSS

ul.wheel {
  padding: 0;
  list-style: none;
  
  width: 10rem;
  height: 10rem;
  background: lightblue;
  position: relative;
  perspective: 200px;
  
  li {
    position: absolute;
    left: 0;
    right: 50%;
    top: 50%;
    line-height: 2;
    margin-top: -1em;
    transform-origin: 100% 50%;
  }
  
  li:nth-child(1)  { transform: rotateY(45deg); background: red; }
  li:nth-child(2)  { transform: rotateY(45deg) rotate(15deg); background: greenyellow; }
  li:nth-child(3)  { transform: rotateY(45deg) rotate(30deg); background: indigo; }
  li:nth-child(4)  { transform: rotate(45deg); background: orangered; }
  li:nth-child(5)  { transform: rotate(60deg); background: green; }
  li:nth-child(6)  { transform: rotate(75deg); background: purple; }
  li:nth-child(7)  { transform: rotate(90deg); background: orange; }
  li:nth-child(8)  { transform: rotate(105deg); background: cyan; }
  li:nth-child(9)  { transform: rotate(120deg); background: magenta; }
  li:nth-child(10) { transform: rotate(135deg); background: yellow; }
  li:nth-child(11) { transform: rotate(150deg); background: blue; }
  li:nth-child(12) { transform: rotate(165deg); background: silver; }
}