JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<section id="test">
    <span><article class="tr_left"></article></span>
    <span><article class="tr_midleft"></article></span>
    <span><article class="tr_midright"></article></span>
    <span><article class="tr_right"></article></span>
</section>
</body>
</html>

CSS

span {display:block; float:left;}
#test article {
    display: inline-block;
    height: 150px;
    width: 160px;
    background-color: blue;
    -webkit-transition: -webkit-transform 0.2s ease;
}
#test article.tr_left {
    -webkit-transform: perspective(400px) rotateY(20deg) scale(1);
}

#test article.tr_midleft {
    -webkit-transform: perspective(400px) rotateY(8deg) scale(0.9);
}

#test article.tr_midright {
    -webkit-transform: perspective(400px) rotateY(-8deg) scale(0.9);
}

#test article.tr_right {
    -webkit-transform: perspective(400px) rotateY(-20deg) scale(1);
}

#test span:hover article, #test article:active {
    -webkit-transform: perspective(400px) scale(1.2);
}