<!-- Inspired by: https://3dtransforms.desandro.com/carousel -->
<div class="header">
    <div class="title">All-Time Top 100 Songs</div>
    <div class="subtitle">(Source: <a href="https://www.billboard.com/articles/news/hot-100-turns-60/8468142/hot-100-all-time-biggest-hits-songs-list" target="_blank">www.billboard.com</a>)</div>
</div>
<div class="carousel">
    <div class="carousel__scene">
        <ol class="carousel__list">
            <!-- Source: https://www.billboard.com/articles/news/hot-100-turns-60/8468142/hot-100-all-time-biggest-hits-songs-list -->
            <li class="carousel__cell"><span class="song__title">The Twist</span><span class="song__year">1960</span><span class="song__artist">Chubby Checker</span></li>
            <li class="carousel__cell"><span class="song__title">Smooth</span><span class="song__year">1999</span><span class="song__artist">Santana Feat. Rob Thomas</span></li>
            <li class="carousel__cell"><span class="song__title">Mack the Knife</span><span class="song__year">1959</span><span class="song__artist">Bobby Darin</span></li>
            <li class="carousel__cell"><span class="song__title">Uptown Funk!</span><span class="song__year">2015</span><span class="song__artist">Mark Ronson Feat. Bruno Mars</span></li>
            <li class="carousel__cell"><span class="song__title">How Do I Live</span><span class="song__year">1997</span><span class="song__artist">Leann Rimes</span></li>
            <li class="carousel__cell"><span class="song__title">Party Rock Anthem</span><span class="song__year">2011</span><span class="song__artist">LMFAO Feat. Lauren Bennett &amp; GoonRock</span></li>
            <li class="carousel__cell"><span class="song__title">I Gotta Feeling</span><span class="song__year">2009</span><span class="song__artist">The Black Eyed Peas</span></li>
            <li class="carousel__cell"><span class="song__title">Macarena (Bayside Boys Mix)</span><span class="song__year">1996</span><span class="song__artist">Los Del Rio</span></li>
            <li class="carousel__cell"><span class="song__title">Shape of You</span><span class="song__year">2017</span><span class="song__artist">Ed Sheeran</span></li>
            <li class="carousel__cell"><span class="song__title">Physical</span><span class="song__year">1981</span><span class="song__artist">Olivia Newton-John</span></li>
            <li class="carousel__cell"><span class="song__title">You Light Up My Life</span><span class="song__year">1977</span><span class="song__artist">Debby Boone</span></li>
            <li class="carousel__cell"><span class="song__title">Hey Jude</span><span class="song__year">1968</span><span class="song__artist">The Beatles</span></li>
            <li class="carousel__cell"><span class="song__title">Closer</span><span class="song__year">2016</span><span class="song__artist">The Chainsmokers Feat. Halsey</span></li>
            <li class="carousel__cell"><span class="song__title">We Belong Together</span><span class="song__year">2005</span><span class="song__artist">Mariah Carey</span></li>
            <li class="carousel__cell"><span class="song__title">Un-Break My Heart</span><span class="song__year">1996</span><span class="song__artist">Toni Braxton</span></li>
            <li class="carousel__cell"><span class="song__title">Yeah!</span><span class="song__year">2004</span><span class="song__artist">Usher Feat. Lil Jon &amp; Ludacris</span></li>
            <li class="carousel__cell"><span class="song__title">Bette Davis Eyes</span><span class="song__year">1981</span><span class="song__artist">Kim Carnes</span></li>
            <li class="carousel__cell"><span class="song__title">Endless Love</span><span class="song__year">1981</span><span class="song__artist">Diana Ross &amp; Lionel Richie</span></li>
            <li class="carousel__cell"><span class="song__title">Tonight&rsquo;s the Night (Gonna Be Alright)</span><span class="song__year">1976</span><span class="song__artist">Rod Stewart</span></li>
            <li class="carousel__cell"><span class="song__title">You Were Meant for Me/Foolish Games</span><span class="song__year">1997</span><span class="song__artist">Jewel</span></li>
            <li class="carousel__cell"><span class="song__title">(Everything I Do) I Do It for You</span><span class="song__year">1991</span><span class="song__artist">Bryan Adams</span></li>
            <li class="carousel__cell"><span class="song__title">I&rsquo;ll Make Love to You</span><span class="song__year">1994</span><span class="song__artist">Boyz II Men</span></li>
            <li class="carousel__cell"><span class="song__title">The Theme From &ldquo;A Summer Place&rdquo;</span><span class="song__year">1960</span><span class="song__artist">Percy Faith &amp; His Orchestra</span></li>
            <li class="carousel__cell"><span class="song__title">Le Freak</span><span class="song__year">1978</span><span class="song__artist">Chic</span></li>
            <li class="carousel__cell"><span class="song__title">How Deep Is Your Love</span><span class="song__year">1977</span><span class="song__artist">Bee Gees</span></li>
            <li class="carousel__cell"><span class="song__title">Eye of the Tiger</span><span class="song__year">1982</span><span class="song__artist">Survivor</span></li>
            <li class="carousel__cell"><span class="song__title">We Found Love</span><span class="song__year">2011</span><span class="song__artist">Rihanna Feat. Calvin Harris</span></li>
            <li class="carousel__cell"><span class="song__title">Low</span><span class="song__year">2008</span><span class="song__artist">Flo Rida Feat. T-Pain</span></li>
            <li class="carousel__cell"><span class="song__title">Just Want to Be Your Everything</span><span class="song__year">1977</span><span class="song__artist">Andy Gibb</span></li>
            <li class="carousel__cell"><span class="song__title">Too Close</span><span class="song__year">1998</span><span class="song__artist">Next</span></li>
            <li class="carousel__cell"><span class="song__title">Every Breath You Take</span><span class="song__year">1983</span><span class="song__artist">The Police</span></li>
            <li class="carousel__cell"><span class="song__title">Somebody That I Used to Know</span><span class="song__year">2012</span><span class="song__artist">Gotye Feat. Kimbra</span></li>
            <li class="carousel__cell"><span class="song__title">Despacito</span><span class="song__year">2017</span><span class="song__artist">Luis Fonsi &amp; Daddy Yankee Feat. Justin Bieber</span></li>
            <li class="carousel__cell"><span class="song__title">Flashdance &hellip; What a Feeling</span><span class="song__year">1983</span><span class="song__artist">Irene Cara</span></li>
            <li class="carousel__cell"><span class="song__title">Rolling in the Deep</span><span class="song__year">2011</span><span class="song__artist">Adele</span></li>
            <li class="carousel__cell"><span class="song__title">Tossin&rsquo; and Turnin&rsquo;</span><span class="song__year">1961</span><span class="song__artist">Bobby Lewis</span></li>
            <li class="carousel__cell"><span class="song__title">The Battle of New Orleans</span><span class="song__year">1959</span><span class="song__artist">Johnny Horton</span></li>
            <li class="carousel__cell"><span class="song__title">One Sweet Day</span><span class="song__year">1995</span><span class="song__artist">Mariah Carey &amp; Boyz II Men</span></li>
            <li class="carousel__cell"><span class="song__title">Truly Madly Deeply</span><span class="song__year">1998</span><span class="song__artist">Savage Garden</span></li>
            <li class="carousel__cell"><span class="song__title">Silly Love Songs</span><span class="song__year">1976</span><span class="song__artist">Wings</span></li>
            <li class="carousel__cell"><span class="song__title">Let&rsquo;s Get It On</span><span class="song__year">1973</span><span class="song__artist">Marvin Gaye</span></li>
            <li class="carousel__cell"><span class="song__title">Night Fever</span><span class="song__year">1978</span><span class="song__artist">Bee Gees</span></li>
            <li class="carousel__cell"><span class="song__title">Another One Bites the Dust</span><span class="song__year">1980</span><span class="song__artist">Queen</span></li>
            <li class="carousel__cell"><span class="song__title">Say Say Say</span><span class="song__year">1983</span><span class="song__artist">Paul McCartney &amp; Michael Jackson</span></li>
            <li class="carousel__cell"><span class="song__title">How You Remind Me</span><span class="song__year">2001</span><span class="song__artist">Nickelback</span></li>
            <li class="carousel__cell"><span class="song__title">Tie a Yellow Ribbon Round the Ole Oak Tree</span><span class="song__year">1973</span><span class="song__artist">Dawn Feat. Tony Orlando</span></li>
            <li class="carousel__cell"><span class="song__title">It&#39;s All in the Game</span><span class="song__year">1958</span><span class="song__artist">Tommy Edwards</span></li>
            <li class="carousel__cell"><span class="song__title">I Want to Hold Your Hand</span><span class="song__year">1964</span><span class="song__artist">The Beatles</span></li>
            <li class="carousel__cell"><span class="song__title">Shadow Dancing</span><span class="song__year">1978</span><span class="song__artist">Andy Gibb</span></li>
            <li class="carousel__cell"><span class="song__title">Call Me Maybe</span><span class="song__year">2012</span><span class="song__artist">Carly Rae Jepsen</span></li>
            <li class="carousel__cell"><span class="song__title">Blurred Lines</span><span class="song__year">2013</span><span class="song__artist">Robin Thicke Feat. T.I. + Pharrell</span></li>
            <li class="carousel__cell"><span class="song__title">Candle in the Wind</span><span class="song__year">1997</span><span class="song__artist">Elton John</span></li>
            <li class="carousel__cell"><span class="song__title">No One</span><span class="song__year">2007</span><span class="song__artist">Alicia Keys</span></li>
            <li class="carousel__cell"><span class="song__title">I Will Always Love You</span><span class="song__year">1992</span><span class="song__artist">Whitney Houston</span></li>
            <li class="carousel__cell"><span class="song__title">End of the Road</span><span class="song__year">1992</span><span class="song__artist">Boyz II Men</span></li>
            <li class="carousel__cell"><span class="song__title">Boom Boom Pow</span><span class="song__year">2009</span><span class="song__artist">The Black Eyed Peas</span></li>
            <li class="carousel__cell"><span class="song__title">Call Me</span><span class="song__year">1980</span><span class="song__artist">Blondie</span></li>
            <li class="carousel__cell"><span class="song__title">Let Me Love You</span><span class="song__year">2005</span><span class="song__artist">Mario</span></li>
            <li class="carousel__cell"><span class="song__title">Stayin&rsquo; Alive</span><span class="song__year">1978</span><span class="song__artist">Bee Gees</span></li>
            <li class="carousel__cell"><span class="song__title">Lady</span><span class="song__year">1980</span><span class="song__artist">Kenny Rogers</span></li>
            <li class="carousel__cell"><span class="song__title">TiK ToK</span><span class="song__year">2010</span><span class="song__artist">KeSha</span></li>
            <li class="carousel__cell"><span class="song__title">I&rsquo;m a Believer</span><span class="song__year">1966</span><span class="song__artist">The Monkees</span></li>
            <li class="carousel__cell"><span class="song__title">Gold Digger</span><span class="song__year">2005</span><span class="song__artist">Kanye West Feat. Jamie Foxx</span></li>
            <li class="carousel__cell"><span class="song__title">Apologize</span><span class="song__year">2007</span><span class="song__artist">Timbaland Feat. OneRepublic</span></li>
            <li class="carousel__cell"><span class="song__title">The Sign</span><span class="song__year">1994</span><span class="song__artist">Ace Of Base</span></li>
            <li class="carousel__cell"><span class="song__title">Centerfold</span><span class="song__year">1982</span><span class="song__artist">The J. Geils Band</span></li>
            <li class="carousel__cell"><span class="song__title">All About That Bass</span><span class="song__year">2014</span><span class="song__artist">Meghan Trainor</span></li>
            <li class="carousel__cell"><span class="song__title">(Just Like) Starting Over</span><span class="song__year">1980</span><span class="song__artist">John Lennon</span></li>
            <li class="carousel__cell"><span class="song__title">Royals</span><span class="song__year">2013</span><span class="song__artist">Lorde</span></li>
            <li class="carousel__cell"><span class="song__title">The Boy Is Mine</span><span class="song__year">1998</span><span class="song__artist">Brandy &amp; Monica</span></li>
            <li class="carousel__cell"><span class="song__title">Because I Love You (The Postman Song)</span><span class="song__year">1990</span><span class="song__artist">Stevie B</span></li>
            <li class="carousel__cell"><span class="song__title">I Love Rock &rsquo;N Rolln</span><span class="song__year">1982</span><span class="song__artist">Joan Jett &amp; the Blackhearts</span></li>
            <li class="carousel__cell"><span class="song__title">Aquarius/Let the Sunshine In</span><span class="song__year">1969</span><span class="song__artist">The 5th Dimension</span></li>
            <li class="carousel__cell"><span class="song__title">Whoomp! (There It Is)</span><span class="song__year">1993</span><span class="song__artist">Tag Team</span></li>
            <li class="carousel__cell"><span class="song__title">Moves Like Jagger</span><span class="song__year">2011</span><span class="song__artist">Maroon 5 Feat. Christina Aguilera</span></li>
            <li class="carousel__cell"><span class="song__title">Ebony and Ivory</span><span class="song__year">1982</span><span class="song__artist">Paul McCartney &amp; Stevie Wonder</span></li>
            <li class="carousel__cell"><span class="song__title">Rush Rush</span><span class="song__year">1991</span><span class="song__artist">Paula Abdul</span></li>
            <li class="carousel__cell"><span class="song__title">That&rsquo;s What Friends Are For</span><span class="song__year">1986</span><span class="song__artist">Dionne &amp; Friends</span></li>
            <li class="carousel__cell"><span class="song__title">Happy</span><span class="song__year">2014</span><span class="song__artist">Pharrell Williams</span></li>
            <li class="carousel__cell"><span class="song__title">Upside Down</span><span class="song__year">1980</span><span class="song__artist">Diana Ross</span></li>
            <li class="carousel__cell"><span class="song__title">Sugar, Sugar</span><span class="song__year">1969</span><span class="song__artist">The Archies</span></li>
            <li class="carousel__cell"><span class="song__title">Just the Way You Are</span><span class="song__year">2010</span><span class="song__artist">Bruno Mars</span></li>
            <li class="carousel__cell"><span class="song__title">Dilemma</span><span class="song__year">2002</span><span class="song__artist">Nelly Feat. Kelly Rowland</span></li>
            <li class="carousel__cell"><span class="song__title">I Heard It Through the Grapevine</span><span class="song__year">1968</span><span class="song__artist">Marvin Gaye</span></li>
            <li class="carousel__cell"><span class="song__title">You&rsquo;re Still the One</span><span class="song__year">1998</span><span class="song__artist">Shania Twain</span></li>
            <li class="carousel__cell"><span class="song__title">Billie Jean</span><span class="song__year">1983</span><span class="song__artist">Michael Jackson</span></li>
            <li class="carousel__cell"><span class="song__title">Hot Stuff</span><span class="song__year">1979</span><span class="song__artist">Donna Summer</span></li>
            <li class="carousel__cell"><span class="song__title">Rockstar</span><span class="song__year">2017</span><span class="song__artist">Post Malone Feat. 21 Savage</span></li>
            <li class="carousel__cell"><span class="song__title">Gangsta&rsquo;s Paradise</span><span class="song__year">1995</span><span class="song__artist">Coolio Feat. L.V.</span></li>
            <li class="carousel__cell"><span class="song__title">Abracadabra</span><span class="song__year">1982</span><span class="song__artist">The Steve Miller Band</span></li>
            <li class="carousel__cell"><span class="song__title">Perfect</span><span class="song__year">2017</span><span class="song__artist">Ed Sheeran</span></li>
            <li class="carousel__cell"><span class="song__title">You&rsquo;re So Vain</span><span class="song__year">1973</span><span class="song__artist">Carly Simon</span></li>
            <li class="carousel__cell"><span class="song__title">Play That Funky Music</span><span class="song__year">1976</span><span class="song__artist">Wild Cherry</span></li>
            <li class="carousel__cell"><span class="song__title">Say You, Say Me</span><span class="song__year">1985</span><span class="song__artist">Lionel Richie</span></li>
            <li class="carousel__cell"><span class="song__title">My Sharona</span><span class="song__year">1979</span><span class="song__artist">The Knack</span></li>
            <li class="carousel__cell"><span class="song__title">All Night Long (All Night)</span><span class="song__year">1983</span><span class="song__artist">Lionel Richie</span></li>
            <li class="carousel__cell"><span class="song__title">Nothing Compares 2 U</span><span class="song__year">1990</span><span class="song__artist">SinÉad O&rsquo;Connor</span></li>
            <li class="carousel__cell"><span class="song__title">I Swear</span><span class="song__year">1994</span><span class="song__artist">All-4-One</span></li>
            <li class="carousel__cell"><span class="song__title">Family Affair</span><span class="song__year">2001</span><span class="song__artist">Mary J. Blige</span></li>
            <li class="carousel__cell"><span class="song__title">Waiting for a Girl Like You</span><span class="song__year">1981</span><span class="song__artist">Foreigner</span></li>
        </ol>
    </div>
    <div class="carousel__controls">
        <button class="previous-button">&#x1F446;&#x1F3FB;</button>
        <button class="next-button">&#x1F447;&#x1F3FB;</button>
    </div>
</div>
<div class="footer">Created with &#x1F496; by <a href="https://codepen.io/agalliat" target="_blank">Angela Galliat</a></div>

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #444;
}

a, a:visited, a:active {
    color: inherit;
}

.header {
    margin: 0.67em 0;
    color: goldenrod;
    background-color: #444444DD;
    border: 3px solid goldenrod;
    border-radius: 10px;
    padding: 10px;
    width: 550px;
    max-width: 95vw;
    z-index: 2;
}

.footer {
    color: goldenrod;
    height: 50px;
    line-height: 50px;
}

.title {
    font-size: 2em;
    font-weight: bold;
}

.subtitle {
    font-size: 0.83em;
    font-weight: bold;
}

.song__title, .song__year, .song__artist {
    display: block;
}

.carousel {
    display: flex;
    align-items: center;
    position: relative;
    padding: 130px 0;
}

.carousel__scene {
    position: relative;
    width: 510px;
    height: 460px;
    max-width: 95vw;
    padding-top: 150px;
    perspective: 100px;
    /*overflow: hidden;*/
}

.carousel__controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    position: absolute;
    right: 15px;
}

.previous-button, .next-button {
    margin: 5px 0;
    padding: 5px;
    width: 50px;
    height: 50px;
    font-family: monospace;
    font-weight: bold;
    font-size: 2rem;
    border: 3px solid goldenrod;
    border-radius: 10px;
    background-color: #444;
}

.previous-button:focus, .next-button:focus {
    outline: none;
    box-shadow: 0 0 6px 3px goldenrod;
}

.carousel__list {
    width: 100%;
    height: 160px;
    margin: 0;
    padding: 0;
    position: absolute;
    transform: translateZ(-288px);
    transform-style: preserve-3d;
    transition: transform 1s;
    list-style: none;
    counter-reset: list-counter;
}

.carousel__cell {
    position: absolute;
    width: 490px;
    height: 140px;
    max-width: calc(95vw - 20px);
    left: 10px;
    top: 10px;
    border: 2px solid white;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    text-align: center;
    transition: transform 1s, opacity 1s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    counter-increment: list-counter;
    background-color: rgba(128, 128, 128, 0.75);
    /*filter: blur(2px);*/
}

.carousel__cell::before {
    content: counter(list-counter);
    color: white;
    text-shadow: 2px 2px black;
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.carousel__cell.selected {
    color: goldenrod;
    border-color: goldenrod;
    border-width: 5px;
    /*filter: none;*/
}

.carousel__cell.selected::before {
    color: goldenrod;
}

.carousel__cell:nth-child(1) { transform: rotateX(  0deg) translateZ(288px); }
.carousel__cell:nth-child(2) { transform: rotateX( 40deg) translateZ(288px); }
.carousel__cell:nth-child(3) { transform: rotateX( 80deg) translateZ(288px); }
.carousel__cell:nth-child(4) { transform: rotateX(120deg) translateZ(288px); }
.carousel__cell:nth-child(5) { transform: rotateX(160deg) translateZ(288px); }
.carousel__cell:nth-child(6) { transform: rotateX(200deg) translateZ(288px); }
.carousel__cell:nth-child(7) { transform: rotateX(240deg) translateZ(288px); }
.carousel__cell:nth-child(8) { transform: rotateX(280deg) translateZ(288px); }
.carousel__cell:nth-child(9) { transform: rotateX(320deg) translateZ(288px); }

const carousel = document.querySelector('.carousel__list');
const cells = carousel.querySelectorAll('.carousel__cell');

const cellWidth = carousel.offsetWidth;
const cellHeight = carousel.offsetHeight;
const cellSize = cellHeight;
const cellCount = 100;

const radius = Math.round((cellSize / 2) / Math.tan(Math.PI / cellCount));
const theta = 360 / cellCount;

var selectedIndex = 0;

function rotateCarousel() {
    const angle = theta * selectedIndex * -1;
    carousel.style.transform = 'translateZ(' + -radius + 'px) ' + 'rotateX(' + -angle + 'deg)';
    
    const cellIndex = selectedIndex < 0 ? (cellCount - ((selectedIndex * -1) % cellCount)) : (selectedIndex % cellCount);
    
    const cells = document.querySelectorAll('.carousel__cell');
    cells.forEach((cell, index) => {
        if(cellIndex === index) {
            if(!cell.classList.contains('selected'))
                cell.classList.add('selected');
        }
        else {
            if(cell.classList.contains('selected')) {
                cell.classList.remove('selected');
            }
        }
    });
}

function selectPrev() {
    selectedIndex--;
    rotateCarousel();    
}

function selectNext() {
    selectedIndex++;
    rotateCarousel();    
}

var prevButton = document.querySelector('.previous-button');
prevButton.addEventListener('click', selectPrev);

var nextButton = document.querySelector('.next-button');
nextButton.addEventListener('click', selectNext);

function initCarousel() {    
    for(let i = 0; i < cells.length; i++) {
        const cell = cells[i];
        const cellAngle = theta * i;
        cell.style.transform = 'rotateX(' + -cellAngle + 'deg) translateZ(' + radius + 'px)';
    }

    rotateCarousel();
}

initCarousel();