They See Me Rollin

<main>
	<img src="img/lil-man.webp" width="1000" height="668" alt="A bulldog in a defiant pose wearing a stylish jumper and gold chain">
	<div class="roller rollin">
		<div>THEY SEE ME ROLLIN</div>
		<div>THEY SEE ME ROLLIN</div>
		<div>THEY SEE ME ROLLIN</div>
		<div>THEY SEE ME ROLLIN</div>
		<div>THEY SEE ME ROLLIN</div>
		<div>THEY SEE ME ROLLIN</div>
	</div>
	<div class="roller hatin">
		<div>THEY BE HATIN</div>
		<div>THEY BE HATIN</div>
		<div>THEY BE HATIN</div>
		<div>THEY BE HATIN</div>
		<div>THEY BE HATIN</div>
		<div>THEY BE HATIN</div>
	</div>
</main>

@font-face {
  font-family: "Comfortaa";
  src: url("./Comfortaa-Bold.ttf");
  font-weight: 700 700;
}

body {
  height: 100dvh;
  margin: 0;

  display: grid;
  place-items: center;
}

main {
  max-width: 600px;
  margin-block-end: 14rem;

  display: grid;
  place-items: center;

  perspective: 1000px;
}

img {
  display: block;

  width: 100%;
  height: auto;
  margin-inline-end: 2.5rem;

  filter: saturate(150%);
  clip-path: polygon(53.46% 86.26%, 72.14% -0.6%, 33.73% 12.88%);
}

/* for some reason justify-content:center on the main
element does not work, but justify-self:center here does! */
.roller {
  position: relative;
  width: 280px;
  height: 40px;

  justify-self: center;
  align-self: end;

  font-family: "Comfortaa", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;

  transform-origin: 100% center;
  transform-style: preserve-3d;

  color: gold;
  text-shadow: rgba(255, 240, 104, 0.8) 0 0 2px;
}

.roller div {
  position: absolute;
  background-color: rgb(5, 5, 5);
  backface-visibility: hidden;
  padding: 10px 0;
}

.roller div:nth-child(1) {
  transform: rotateX(60deg) translateZ(40px);
}

.roller div:nth-child(2) {
  transform: rotateX(120deg) translateZ(40px);
}

.roller div:nth-child(3) {
  transform: rotateX(180deg) translateZ(40px);
}

.roller div:nth-child(4) {
  transform: rotateX(240deg) translateZ(40px);
}

.roller div:nth-child(5) {
  transform: rotateX(300deg) translateZ(40px);
}

.roller div:nth-child(6) {
  transform: rotateX(360deg) translateZ(40px);
}

@keyframes roll {
  to {
    transform: rotateX(360deg);
  }
}

.rollin {
  animation-name: roll;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.hatin {
  width: 200px;
  margin-top: 30px;

  animation-name: roll;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: reverse;
}