JSFiddle - React, Tailwind, and code Playground

by wbednarski

HTML

<div class="camera">
    <div class="stage">
        <div class="image1">
            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcT-j7Jf3s2RHlTvpLUseWKcpisxgQDdu_DRgQT9BbNyTJjwQY7p" width="150" height="100" />
        </div>
        <div class="image2">
            <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcRPkaSeA1BK60T_42T34Fz5n8U_DayRvbpUVyWf4WhldN_GWa-4" width="150" height="100" />
        </div>
        <div class="image3">
            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcQ25pcsSUWwEAe2lqDy0q9vPJyWWnqSqYtalXsq8wQJCOzyDoZx" width="150" height="100">
        </div>
        <div class="image4">
            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSIxfFf-3ZPZYSElpAuBrCUfyoRMUpFCa4PSqko0qBDxYndrbw8" width="150" height="100">
        </div>
    </div>
</div>

CSS

body {
  width: 400px;
  height: 400px;  
}
.camera {
  top: 20%;
  left: 10%;
  position: absolute;
  float: left;
  -webkit-transform-style: preserve-3d;
  -webkit-perspective-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;  
}

.stage {
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 800;   
}

.image1, .image2, .image3, .image4 {
  float: left;
  -webkit-transform-style: preserve-3d; 
}

.image1 {
  -webkit-transform: translate3d(100px, 100px, 14px)  rotateY(20deg);    
}

.image2 {
  -webkit-transform: translate3d(-100px, -50px, -200px) rotateY(45deg);    
}
.image3 {
  -webkit-transform: translate3d(20px, 17px, -50px) rotateY(5deg);    
}
.image4 {
  -webkit-transform: translate3d(300px, 25px, 10px) rotateY(-5deg);    
}

JavaScript

var _mouseX = 0, _mouseY = 0, rx = 0, ry = 0;
var px = 0, py = 0, pz = 0;
var rotation = '', movement = '', origin = '';

function update_camera() {
  $(".camera").css('-webkit-transform', movement+' '+rotation );
  //$(".camera").css('-webkit-transform-origin', origin); 
}

$(document).bind('mousemove', function(e) {
    
    mouseX = event.pageX;
    mouseY = event.pageY;
    
    if (mouseX > _mouseX)
       ry += 1.5;
    else if (mouseX < _mouseX)
       ry -= -1.5;
        
    if (mouseY > _mouseY)
        rx -= 1.5;
    else if (mouseY < _mouseY)
        rx += 1.5;
            
    _mouseX = mouseX;
    _mouseY = mouseY;
    
    rotation = 'rotateX('+rx+'deg) rotateY('+ry+'deg)';
    update_camera();
});
    
$(document).bind('keydown', function(e) {
    switch ( e.keyCode ) {
        case 65: // a
                px += 5;
                break;
                
        case 68: // d
                px -= 5;
                break;
        
        case 83: // s
                py -= 5;
                break;
                
        case 87: // w
                py += 5;
                break;
    };
    
    movement = 'translate3d('+px+'px, '+py+'px, 0px)';
    origin = -px+'px 0px '+(-pz)+'px'
    update_camera();
});