JSFiddle - React, Tailwind, and code Playground

by Piyush Baliyan

HTML

<div id="parent">
    <div id="test" style="-webkit-transform: rotateY(5.397222900390625deg) rotateX(-11.197222900390624deg);">
        <div class="innerbox"><img src="https://randomuser.me/api/portraits/men/1.jpg"/></div>
        <div class="innerbox"><img src="https://randomuser.me/api/portraits/men/2.jpg"/></div>
        <div class="innerbox"><img src="https://randomuser.me/api/portraits/men/3.jpg"/></div>        

        <div class="innerbox"><img src="https://randomuser.me/api/portraits/men/4.jpg"/></div>
        <div class="innerbox"><img src="https://randomuser.me/api/portraits/men/5.jpg"/></div>
        <div class="innerbox"><img src="https://randomuser.me/api/portraits/men/6.jpg"/></div>        

        <div class="innerbox"><img src="https://randomuser.me/api/portraits/men/7.jpg"/></div>
        <div class="innerbox"><img src="https://randomuser.me/api/portraits/men/8.jpg"/></div>
        <div class="innerbox"><img src="https://randomuser.me/api/portraits/men/9.jpg"/></div>        
</div>
</div>

CSS

#test {
    width:300px;
    height:300px;
    -webkit-transform:rotateY(0deg);
    -webkit-perspective:1000px;
    position:absolute;
    left:100px;
    top:100px;
}
#parent {
    -webkit-perspective:1500px;
    margin: auto;
    width: 300px;
}
.innerbox {
    width:90px;
    height:90px;
    margin:3px;
    background:pink;
    display:inline-block;
    z-index:2;
    -webkit-transition:0.2s;
    box-shadow: 0px 0px 15px -5px #888888;
    border-radius: 4px;
    overflow: hidden;
}

#innerbox img {
  width: 100%;
  height: 100%;
}

JavaScript

$(window).load(function(){
var x, y;
var p = $("#test");
var position = p.position(),
    left = position.left,
    top = position.top,
    wd = p.width(),
    ht = p.height();
$("#test").on("mousemove", function (event) {
    x = event.pageX - left - wd / 2;
    y = event.pageY - top - ht / 2;
    $("#test").css({
        'transform': 'rotateY(' + -x / 7 + 'deg) rotateX(' + y / 7 + 'deg)'
    });
});

$(".innerbox").on("mouseover", function (here) {
    $(this).siblings('.innerbox').removeAttr( 'style' );
    $(this).css({
        'transform': 'translateZ(150px) scale(1.1,1.1)',
        'z-index':'5'});
});

});