JSFiddle - React, Tailwind, and code Playground

by rgthree

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;
    /* Add this to show bug
    -webkit-transform-style: preserve-3d;
    */
}
h1 {
    -webkit-transform: rotateY(40deg);
    -moz-transform: rotateY(40deg);
    padding: 30px;
    background: #abc123;
}

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;
        $('h1').css('-moz-transform','rotateY('+angle.toFixed(2)+'deg)');
        $('h1').css('-webkit-transform','rotateY('+angle.toFixed(2)+'deg)');
    });     
})