JSFiddle - React, Tailwind, and code Playground

HTML

<div><img src="http://i.imgur.com/1YeEu.png" /></div>

<section>
    <h1>Test with some text</h1>
</section>

CSS

section { 
    width: 200px; 
    margin: 100px auto 0; 
    position: relative;
    -moz-perspective: 200;
    -webkit-perspective: 200;
    transform: translateZ(100px);
    /* Add this to show bug
    -webkit-transform-style: preserve-3d;
    */
    background: -moz-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(0,158,195,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,183,234,1)), color-stop(100%,rgba(0,158,195,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%); /* Chrome10+,Safari5.1+ */
}
h1 {
    -webkit-transform: rotateY(40deg);
    -moz-transform: rotateY(40deg);
    padding: 30px;
}

div {position: absolute; left: 50%; margin-left: -16px; top: 110px; z-index: 1; }

JavaScript

jQuery(document).ready(function(){
    $(document).mousemove(function(e){
        var angle = (e.pageX/$(document).width()*20 - 10)*10;
        $('section').css('-moz-transform','rotateY('+angle.toFixed(2)+'deg)');
        $('section').css('-webkit-transform','rotateY('+angle.toFixed(2)+'deg)');
    });     
})