<div class="container">
  <div class="vinyl"></div>
  <div class="sleeve"></div>
  <div class="cover"></div>
</div>

:root {
  /* Adjust these... if you want. */
  --primary-hue: 90;
  --hover-rotation: -30deg;
  --vinyl-size: 400px;
  --vinyl-translate-x: 90%;
  --sleeve-translate-x: 35%;
  
  /* Probably leave these alone... really. */
  --c-black: oklch(0 0 var(--primary-hue) / 100%);
  --c-dark: oklch(0.5 0.05 var(--primary-hue) / 100%);
  --c-label: oklch(1 0.2 var(--primary-hue) / 100%);
  --c-light: oklch(1 0.1 var(--primary-hue) / 100%);
  --c-off-white: oklch(1 0.005 var(--primary-hue) / 100%);
  --c-white: oklch(1 0 var(--primary-hue) / 100%);
  --logo-size: 7cqi;
 }

body {
  background-color: var(--c-light);
  display: grid;
  min-height: 100dvh;
  place-content: center;
  perspective: 1000px;
}

.container {
  block-size: var(--vinyl-size);
  container-type: inline-size;
  display: grid;
  inline-size: var(--vinyl-size);
  position: relative;
  transform-style: preserve-3d;
  transition:
    rotate 0.6s ease-in-out,
    translate 0.4s ease-in-out;
}

.container::before {
  background-color: var(--c-black);
  block-size: 4%;
  content: '';
  inline-size: 100%;
  inset: auto 0 -2%;
  mask-image:
    radial-gradient(
      var(--c-black) 0%,
      transparent 75%
    );
  opacity: 0.3;
  position: absolute;
  scale: 1.3 1;
  transform-origin: left center;
  transition:
    opacity 0.4s ease-in-out,
    scale 0.4s ease-in-out;
  translate: -10% 0;
}

.container:hover {
  rotate: 1 1 0 var(--hover-rotation);
  translate: calc((var(--vinyl-translate-x) / 2) * -1) 0%;
}

.container:hover::before {
  opacity: 0.5;
  scale: 2 3;
}

.container:hover .sleeve {
  translate: var(--sleeve-translate-x) 0%;
}

.container:hover .vinyl {
  animation-play-state: running;
  translate: var(--vinyl-translate-x) 0%;
}

.container > * {
  grid-area: 1/2;
}

.vinyl {
  /* Mimic 33⅓ RPM. */
  animation:
    rotate
    1.8s
    linear
    0s
    infinite
    normal
    forwards 
    paused;
  background:
    repeating-radial-gradient(
      circle,
      var(--c-black) 0%,
      var(--c-black) 0.5%,
      var(--c-dark) 0.5%,
      var(--c-dark) 0.75%
    );
  block-size: var(--vinyl-size);
  border-radius: 50%;
  inline-size: var(--vinyl-size);
  mask-image:
    radial-gradient(
      circle,
      transparent 0%,
      transparent 1.5%,
      var(--c-black) 1.5%,
      var(--c-black) 100%
    );
  position: relative;
  scale: 0.94 0.935;
  transition: translate 0.4s ease-in-out;
  translate: 20% 0%;
}

.vinyl::before,
.vinyl::after {
  position: absolute;
}

.vinyl::before {
  background:
    radial-gradient(
      circle,
      var(--c-label) 0%,
      var(--c-label) 42%,
      color-mix(in oklch, var(--c-label) 92%, var(--c-black)) 45%,
      var(--c-label) 45%,
      var(--c-label) 100%
    );
  border-radius: 50%;
  content: '';
  inset: 33%;
}

.vinyl::after {
  block-size: var(--logo-size);
  border: 1px solid var(--c-dark);
  color: var(--c-dark);
  content: 'CSS IS AWESOME';
  display: grid;
  align-items: center;
  font-size: calc(var(--logo-size) / 3.5);
  font-weight: bold;
  inline-size: var(--logo-size);
  inset: 50% auto auto 53%;
  line-height: 1;
  opacity: 0.9;
  padding: calc(var(--logo-size) / 10);
  translate: 0 -50%;
}

.sleeve {
  background-color: var(--c-off-white);
  block-size: var(--vinyl-size);
  border-radius: 2%;
  mask-image:
    radial-gradient(
      circle,
      transparent 0%,
      transparent 30%,
      var(--c-black) 30%,
      var(--c-black) 100%
    );
  inline-size: var(--vinyl-size);
  scale: 0.98;
  transition: translate 0.4s ease-in-out 0.05s;
}

.cover {
  background-color: var(--c-black);
  background-image: url('https://picsum.photos/600');
  background-size: cover;
  block-size: var(--vinyl-size);
  border-radius: 0.5%;
  box-shadow: 2px 0 5px -2px var(--c-dark);
  inline-size: var(--vinyl-size);
  position: relative;
}

.cover::before,
.cover::after {
  position: absolute;
}

.cover::before {
  background-color: var(--c-label);
  block-size: calc(var(--logo-size) * 2.5);
  border-radius: 0 0 5% 5%;
  content: '';
  inset: 0 3% auto auto;
  inline-size: calc(var(--logo-size) * 2.5);
}

.cover::after {
  align-items: center;
  block-size: var(--logo-size);
  border: 1px solid var(--c-dark);
  color: var(--c-dark);
  content: 'CSS IS AWESOME';
  display: grid;
  font-size: calc(var(--logo-size) / 3.5);
  font-weight: bold;
  inline-size: var(--logo-size);
  inset: 4.5% 8% auto auto;
  line-height: 1;
  opacity: 0.9;
  padding: calc(var(--logo-size) / 10);
}

@keyframes rotate {
  from {
    rotate: 0 0 1 0deg;
  }
  
  to {
    rotate: 0 0 1 360deg;
  }
}