JSFiddle - React, Tailwind, and code Playground

by stopsatgreen

HTML

<div>
<ul>
    <li>X</li>
    <li>X</li>
    <li>X</li>
    <li>X</li>
    <li>X</li>
    <li>X</li>
</ul>
</div>

CSS

ul, li { -webkit-transition: all 1s ease-in-out; }

ul {
    background-color: rgba(0,0,0,0.25);
    height: 100px;
    margin: 0 auto;
    width: 150px;
    -webkit-transform: perspective(300)  rotateY(30deg) translateY(20px);
    -webkit-transform-style: preserve-3d;
}

li {
    background-color: red;
    color: white;
    display: block;
    float: left;
    font: bold 48px/50px sans-serif;
    height: 50px;
    overflow: hidden;
    text-align: center;
    width: 50px;
}

li:nth-child(even) { background-color: blue; }

:hover li { -webkit-transform: translateZ(30px); }

:hover li:nth-child(even) { -webkit-transform: translateZ(-30px); }