Stack

by Grzegorz Matyszewski

HTML

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li>H</li>
  <li>I</li>
  <li>J</li>
</ul>
<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

SCSS

body { overflow: hidden; margin: 0; padding: 0; }

li {
  list-style-type: none;
  padding: 0;
}

ul { margin: 0; }

ul li {
  border-bottom: 1px solid silver;
  font-family: sans-serif;
  text-align: right;
  line-height: 10vh;
  cursor: pointer;
  padding-inline: 2%;
  &:hover { color: red; }
}

ol {
  position: absolute;
  left: 0;
  top: 50%;
  width: 46vw;
  height: 46vw;
  margin-top: calc(-23vw + 50px);
  transform: rotate(-8deg);
  pointer-events: none;
}

ol li {
  width: inherit;
  height: inherit;
  position: absolute;
  transition: transform 0.4s cubic-bezier(.5, 0, .2, 1);
  transform-origin: -100% 150%;
  $baseHue: random(360);
  @for $i from 1 through 10 {
    &:nth-child(#{$i}) {
      margin: $i * -10px;
      background: hsl(($i * 130) + $baseHue, 80%, 50%);
    }
  }
}

@for $i from 2 through 10 {
  ul:has(li:nth-child(#{$i}):hover) + ol {
    li:nth-last-child(-n + #{$i - 1}) {
      transform: rotate(-15deg) translate(-70%, -50%);
    }
  }
}