Colorful Spinning Wheel | Learning Axis

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #2c3e50;
      overflow: hidden;
    }
    .wheel {
      position: relative;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      overflow: hidden;
      animation: spin 10s linear infinite;
    }
    .slice {
      position: absolute;
      width: 50%;
      height: 50%;
      background-color: transparent;
      border-top-left-radius: 100%;
      transform-origin: 100% 100%;
    }
    .slice:nth-child(1) { transform: rotate(0deg); background-color: #e74c3c; }
    .slice:nth-child(2) { transform: rotate(60deg); background-color: #3498db; }
    .slice:nth-child(3) { transform: rotate(120deg); background-color: #f1c40f; }
    .slice:nth-child(4) { transform: rotate(180deg); background-color: #2ecc71; }
    .slice:nth-child(5) { transform: rotate(240deg); background-color: #9b59b6; }
    .slice:nth-child(6) { transform: rotate(300deg); background-color: #e67e22; }
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 80px;
      height: 80px;
      background-color: #2c3e50;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }