JSFiddle - React, Tailwind, and code Playground

by mkurzweil

HTML

<div id="wrapper">
    <div id="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec nulla mollis, porta lacus a, pulvinar justo. Etiam gravida ante quis erat fermentum ultrices. Donec lacinia ipsum vel tortor consectetur, ut venenatis felis tempor. Curabitur porttitor dictum cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sodales dapibus arcu vel interdum. Etiam non tristique velit, id ullamcorper mauris.</div>
    <div id="div2">
        <img style='height:150px; width: 180px' src='http://mvvm.azurewebsites.net/Content/images/jsfiddle-logo.png' />
    </div>
</div>
<p id='text'></p>

CSS

#wrapper {
    width: 100%;
    height: 90vh;
}
#wrapper:hover #div1,
#wrapper:hover #div2 {
    transition: transform 0.1s linear, box-shadow 0.1s linear;
}

#div1,
#div2 {
    transform: rotate3d(0,0,0,0deg);
    box-shadow: 0 0 5px #3D352A;
    transition: transform 0.3s linear, box-shadow 0.3s linear;
}

#div1 {
    position:fixed;
    top:50%;
    left:25%;
    margin-top:-170px;
    height:170px;
    width:360px;
    ;
    background-color:red;
}
#div2 {
    position:fixed;
    top:50%;
    left:37.5%;
    width:180px;
    height:150px;
    background-color:black;
    color:white;
    transform: rotate3d(0,0,0,0deg);
}

JavaScript

$(document).ready(function () {
    var $one = $('#div1'),
        $two = $('#div2'),
        browserPrefix = "",
        usrAg = navigator.userAgent;
    if(usrAg.indexOf("Chrome") > -1 || usrAg.indexOf("Safari") > -1) {
        browserPrefix = "-webkit-";
    } else if (usrAg.indexOf("Opera") > -1) {
        browserPrefix = "-o";
    } else if (usrAg.indexOf("Firefox") > -1) {
        browserPrefix = "-moz-";
    } else if (usrAg.indexOf("MSIE") > -1) {
        browserPrefix = "-ms-";
    }
    
    $(document).mouseleave(function (event) {
        $one.removeAttr('style');
        $two.removeAttr('style');
    });
    
    $(document).mousemove(function (event) {
        var cx = Math.ceil(window.innerWidth / 2.0),
            cy = Math.ceil(window.innerHeight / 2.0),
            dx = event.pageX - cx,
            dy = event.pageY - cy,
            tiltx = (dy / cy),
            tilty = - (dx / cx),
            radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2)),
            degree = (radius * 15);
        
            shadx = degree*tiltx;   /*horizontal shadow*/
            shady = degree*tilty;   /*vertical shadow*/

        $one.css(browserPrefix + 'transform', 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');
        $two.css(browserPrefix + 'transform', 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');
        
         

        if(dx>cx) /*without that horizontal values are reversed*/
            $('#div1, #div2').css('box-shadow', + (-shady) + 'px ' + (-shadx) +'px 5px #3D352A');
        else $('#div1, #div2').css('box-shadow', + shady + 'px ' + (-shadx) +'px 5px #3D352A');
    });
});