JSFiddle - React, Tailwind, and code Playground

by teneff

HTML

<div id="list">
    <a href="#">
        <img src="" alt="" />
        <span>text 1</span>
    </a>
    <a href="#">
        <img src="" alt="" />
        <span>text 1</span>
    </a>
    <a href="#" class="focus">
        <img src="" alt="" />
        <span>text 1</span>
    </a>
    <a href="#">
        <img src="" alt="" />
        <span>text 1</span>
    </a>
    <a href="#">
        <img src="" alt="" />
        <span>text 1</span>
    </a>
    <a href="#">
        <img src="" alt="" />
        <span>text 1</span>
    </a>
    <a href="#">
        <img src="" alt="" />
        <span>text 1</span>
    </a>
    <a href="#">
        <img src="" alt="" />
        <span>text 1</span>
    </a>
</div>

CSS

div#list {
    border: 1px solid green;
    white-space: nowrap;
    padding: 0;
    position: relative;
    -webkit-perspective: 400;
    -webkit-perspective-origin: 50% 50%;
    overflow-x: scroll;
}
div#list a {
    display: inline-block;
    border: 1px solid red;
    background: #fff;
    -webkit-transition: -webkit-transform 0.5s; /* Safari */
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(45deg) scale(0.8);
}
div#list a:hover, div#list a:focus {
    -webkit-transform: rotateY(0deg);
}
div#list a:hover ~ a, div#list a:focus ~ a {
    -webkit-transform: rotateY(-45deg) scale(0.8);
}
div#list a img {
    width: 100px;
    height: 150px;
}
div#list a span {
    display: block;
}

JavaScript

$(document).ready(function(){
    $('a.focus').focus();
});