:root {
  --pink: hsl(338, 70%, 55%);
  --teal: hsl(183, 70%, 62%);
  --white: hsl(334, 7%, 95%);
}

*, *::after, *::before {
  box-sizing: border-box;
}

body {
  background: hsl(224, 32%, 12%);
  background-image: conic-gradient(
    from 0deg at 50% 50%,
    blue,
    purple,
    purple,
    blue
  );
  background-blend-mode: multiply;
  min-block-size: 100dvh;
  color: white;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-content: center;
  align-items: stretch;
}

a {
  color: hsl(224, 12%, 82%)
}

main {
  /* min-height: 100dvh; */
  width: 100%;
  display: grid;
  place-items: center;
}

pre {
  --selector: var(--pink);
  --property: var(--teal);
  --punctuation: var(--white);

  font-size: 2rem;
  font-weight: bold;
  background: hsl(222, 45%, 7%);
  padding: 2rem;
  border-radius: 1rem;

  position: relative;

  transform-style: preserve-3d;
  transform:
    perspective(4000px)
    rotateX(var(--rotateX))
    rotateY(var(--rotateY));
}

pre > * {
  text-shadow: 0 0 0.25em currentColor;
}

.selector { color: var(--selector); }
.property { color: var(--property); }
.punctuation { color: var(--punctuation); }
.property + .punctuation { color: var(--property); }

pre::before,
pre::after {
  content: '';
  position: absolute;
  border-radius: inherit;
}

pre::before {
  inset: 0.75rem;
  background: black;
  transform: translateZ(-49px);
  filter: blur(15px);
  opacity: 0.5;
}

pre::after {
  inset: -1rem;
  background: 
    linear-gradient(-45deg, red, blue);
  transform:
    translateZ(-50px);
}

/* CSS-only solution */
/*
.pre-container {
  position: relative;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

pre {
  grid-row: 1 / -1;
  grid-column: 1 / -1;

  transition: transform 250ms ease;
}

.pre-container > div {
  z-index: 10;
  position: absolute;
  inset: 0;
}

.pre-container > div:nth-child(1) {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
.pre-container > div:nth-child(2) {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}
.pre-container > div:nth-child(3) {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
}
.pre-container > div:nth-child(4) {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}
.pre-container > div:nth-child(5) {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
.pre-container > div:nth-child(6) {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}
.pre-container > div:nth-child(7) {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
}
.pre-container > div:nth-child(8) {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}
.pre-container > div:nth-child(9) {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

.pre-container > div:nth-child(1):hover ~ pre {
  --rotateX: 25deg;
  --rotateY: -25deg;
}
.pre-container > div:nth-child(2):hover ~ pre {
  --rotateX: 25deg;
  --rotateY: 0deg;
}
.pre-container > div:nth-child(3):hover ~ pre {
  --rotateX: 25deg;
  --rotateY: 25deg;
}
.pre-container > div:nth-child(4):hover ~ pre {
  --rotateX: 0deg;
  --rotateY: -25deg;
}
.pre-container > div:nth-child(5):hover ~ pre {
  --rotateX: 0deg;
  --rotateY: 0deg;
}
.pre-container > div:nth-child(6):hover ~ pre {
  --rotateX: 0deg;
  --rotateY: 25deg;
}
.pre-container > div:nth-child(7):hover ~ pre {
  --rotateX: -25deg;
  --rotateY: -25deg;
}
.pre-container > div:nth-child(8):hover ~ pre {
  --rotateX: -25deg;
  --rotateY: 0deg;
}
.pre-container > div:nth-child(9):hover ~ pre {
  --rotateX: -25deg;
  --rotateY: 25deg;
}
*/