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">1. Box</div>
        <div class="innerbox">2. Box</div>
        <div class="innerbox">3. Box</div>
        <div class="innerbox">4. Box</div>
        <div class="innerbox">5. Box</div>
        <div class="innerbox">6. Box</div>
        <div class="innerbox">7. Box</div>
        <div class="innerbox">8. Box</div>
        <div class="innerbox">9. Box</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;
}
.innerbox {
    width:90px;
    height:90px;
    margin:3px;
    background:pink;
    display:inline-block;
    z-index:2;
    -webkit-transition:0.2s;
    box-shadow: 0px 0px 10px #888888;
    position:relative
}

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'});
});

});