JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stage">
    <div class="image1">
        <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcT-j7Jf3s2RHlTvpLUseWKcpisxgQDdu_DRgQT9BbNyTJjwQY7p" width="150" height="100" />
    </div>
</div>

CSS

body {
  width: 400px;
  height: 400px;
  background: #f2f2f2;  
}
.stage{
  top: 15%;
  left: 15%;
  position: absolute;
  float: left;
  -webkit-transform-style: preserve-3d;
  -webkit-perspective-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%; 
  -webkit-perspective: 800px;   
}

.image1 {
  float: left;
  -webkit-transform-style: preserve-3d; 
  -webkit-transform: translate3d(0px,0px,0px) rotateY(0deg);    
}

JavaScript

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

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

function calculatePos() {
    var angle = ((ry%360)/360)*(2*Math.PI);
    px = Math.sin(angle) * 800;
    pz = 800 - Math.cos(angle) * 800;   
}
    
$(document).bind('keydown', function(e) {
    switch ( e.keyCode ) {
        case 81: // q
            ry -= 1.5;
            calculatePos();
            break;
        case 69: // e
            ry += 1.5;
            calculatePos();
            break;
    };
    
    rotation = 'rotateY('+ (-ry)+'deg)';
    movement = 'translate3d('+px+'px, '+py+'px, ' + pz + 'px)';
    update_camera();
});