<div class="cube">
  <div class="side left">
    CSS<br>
    CSS<br>
    CSS
  </div>
  <div class="side front">
    CSS<br>
    CSS<br>
    CSS
  </div>
  <div class="side top">
    CSS<br>
    CSS<br>
    CSS
  </div> 
</div>

<aside>
  <fieldset>
    <input checked type="radio" name="mod" id="nomod">
    <label for="nomod">Tritone</label>
  </fieldset>
  <fieldset>
    <input type="radio" name="mod" id="monotone">
    <label for="monotone">Monotone</label>
  </fieldset>
  <fieldset>
    <input type="radio" name="mod" id="dim">
    <label for="dim">Dim</label>
  </fieldset>
</aside>

@import "https://unpkg.com/open-props" layer(design.system);
@import "https://unpkg.com/open-props/normalize.min.css" layer(design.system);
@import "https://unpkg.com/open-props/buttons.min.css" layer(design.system);

@layer demo {
  .cube {
    --size: 40vmin;
    
    inline-size: var(--size);
    block-size: var(--size);
    
    display: grid;
    grid: [stack] / [stack];
    
    transform-style: preserve-3d;
    transform: rotateX(235deg) rotateZ(-135deg);
    margin-block-start: 70%;
    container-type: inline-size;
  }

  .side {
    grid-area: stack;
    display: grid;
    place-content: center;
    width: var(--size);
    overflow: hidden;
    aspect-ratio: var(--ratio-square);
    transition: color .8s var(--ease-out-5);
    
    font-weight: var(--font-weight-9);
    font-size: 50vmin;
    font-size: 38cqi;
    line-height: .85;
    letter-spacing: .15em; 
  }

  .top {
    transform: translateZ(calc(var(--size) * -1)) rotateY(180deg);
    color: var(--link);
  }

  .front {
    transform: rotateZ(180deg) rotateX(90deg);
    transform-origin: bottom;
    color: var(--text-1);
  }

  .left {
    transform: rotateX(90deg) rotateY(90deg) translateX(20vmin) translateY(calc(var(--size) / 2 * -1));
    transform-origin: right;
    color: var(--text-2);
  }
  
  html:has(#monotone:checked) .side {
    color: var(--text-1);
  }
  
  html:has(#dim:checked) .side {
    color: var(--surface-2);
  }
}

@layer demo.support {
  aside {
    position: absolute;
    inset-block-start: var(--size-5);
    inset-inline-start: var(--size-5);
  }
  
  fieldset {
    display: flex;
    place-items: center;
    gap: 1ch;
    border: none;
  }
  
  html {
    background: white;
  }
  
  @media (prefers-color-scheme: dark) {
    html {
      background: var(--gray-12);
    }
  }
  
  body {
    display: grid;
    place-content: center;
  }
}