Spotify wrapped Text effect

Spotify wrapped Text effect developed using only CSS. Text effects Created using HTML and CSS.

Developed by Navelpluisje and created with HTML and CSS. Created on December 8, 2019 and Updated on December 9, 2019.

Created the spotify wrapped effect with css only

Find the demo and code below

See the Pen Spotify wrapped effect by Navelpluisje (@navelpluisje) on CodePen.

HTML

<section class="container">
  <div class="hover-area area-1"></div>
  <div class="hover-area area-2"></div>
  <div class="hover-area area-3"></div>
  <div class="hover-area area-4"></div>
  <div class="hover-area area-5"></div>
  <div class="hover-area area-6"></div>
  <div class="hover-area area-7"></div>
  <div class="hover-area area-8"></div>
  <div class="hover-area area-9"></div>
  
  <section class="content" id="content">
    <div class="title primary">We staan aan het</div>
    <div class="title secondary">eind van een decennium.</div>
    <div class="title tertiary">Ben je klaar voor jouw</div>
    <div class="title quaternary">2019 Wrapped?</div>
  </section>  
</section>

CSS

@import url('https://fonts.googleapis.com/css?family=Codystar:300&display=swap');
:root {
 --default-text: #fff;
 --default-background: #000;  --color-primary: hsl(77, 92%, 71%);
 --color-secondary: hsl(163, 32%, 43%);
 --color-tertiary: hsl(0, 0%, 100%);
 --color-quaternary: hsl(324, 86%, 53%);
}  body {
 background: var(--default-background);
 color: var(--default-text);
 font-family: 'Codystar', sans-serif;
 line-height: 1.6;
 font-size: 3.2rem;
 letter-spacing: -2px;
}  .container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(3, 1fr);
 grid-template-areas: 'one two three'
 'four five six'
 'seven eight nine';
 height: 100vh;
 perspective: 1000px; 
}  .hover-area {
 align-self: stretch;
 justify-self: stretch;
 z-index: 1;
}  .area-1 { grid-area: one; }
.area-2 { grid-area: two; }
.area-3 { grid-area: three; }
.area-4 { grid-area: four; }
.area-5 { grid-area: five; }
.area-6 { grid-area: six; }
.area-7 { grid-area: seven; }
.area-8 { grid-area: eight; }
.area-9 { grid-area: nine; }  .hover-area:nth-of-type(1):hover {
 &~.content {
 transform: rotateY(10deg) rotateX(-10deg);
 & .secondary, .quaternary {
 transform: translateX(-.5rem) rotateY(2deg) rotateX(-2deg);
 }
 }
}
.hover-area:nth-of-type(2):hover {
 &~.content {
 transform: rotateY(0deg) rotateX(-10deg);
 & .secondary, .quaternary {
 transform: translateX(0) rotateX(0) rotateX(-2deg);
 }
 }
}
.hover-area:nth-of-type(3):hover {
 &~.content {
 transform: rotateY(-10deg) rotateX(-10deg);
 & .secondary, .quaternary {
 transform: translateX(.5rem) rotateY(-2deg) rotateX(-2deg);
 }
 }
}
.hover-area:nth-of-type(4):hover {
 &~.content {
 transform: rotateY(10deg);
 & .secondary, .quaternary {
 transform: translateX(-.5rem) rotateX(2deg);
 }
 }
}
.hover-area:nth-of-type(5):hover {
 &~.content {
 transform: rotateY(0deg);
 & .secondary, .quaternary {
 transform: translateX(0) rotateX(0);
 }
 }
}
.hover-area:nth-of-type(6):hover {
 &~.content {
 transform: rotateY(-10deg);
 & .secondary, .quaternary {
 transform: translateX(.5rem) rotateX(-2deg);
 }
 }
}
.hover-area:nth-of-type(7):hover {
 &~.content {
 transform: rotateY(10deg) rotateX(10deg);
 & .secondary, .quaternary {
 transform: translateX(-.5rem) rotateY(2deg) rotateX(2deg);
 }
 }
}
.hover-area:nth-of-type(8):hover {
 &~.content {
 transform: rotateY(0deg) rotateX(10deg);
 & .secondary, .quaternary {
 transform: translateX(0) rotateX(0) rotateX(2deg);
 }
 }
}
.hover-area:nth-of-type(9):hover {
 &~.content {
 transform: rotateY(-10deg) rotateX(10deg);
 & .secondary, .quaternary {
 transform: translateX(.5rem) rotateY(-2deg) rotateX(2deg);
 }
 }
}  .content {
 align-self: center;
 display: flex;
 flex-direction: column;
 grid-area: 1 / 1 / 4 / 4;
 justify-content: space-between;
 justify-self: center;
 height: 50vh;
 width: 43.5rem;
 perspective: 1000px;
 transition: transform ease 2s;
 position: relative;
 padding: 1rem;
}  .primary {
 color: var(--color-primary);
}
.secondary {
 color: var(--color-secondary);
}
.tertiary {
 color: var(--color-tertiary);
}
.quaternary {
 align-self: flex-end;
 color: var(--color-quaternary);
}
.secondary, .quaternary {
 transition: transform ease 2s;
}