Edit in JSFiddle

function texture(elm, image, angle, addLight, addMask) {
    
    var stop1 = 0.5 + (Math.sin(angle)/2);
    var stop2 = 1 - stop1;
    var cssText = "-webkit-transform: rotateY(" + angle + "rad);background:";
    
    if (addLight) {
        cssText += "-webkit-linear-gradient(0deg, rgba(0,0,0," + stop2 + "),rgba(0,0,0," + stop1 + ")),";
    }

    cssText += "url(" + image + ");";
        
    if (addMask) {
       cssText += "-webkit-mask-image: url(" + image + ");";
    }
        
    elm.style.cssText = cssText;
}
   
var ry=0;
var plane = document.getElementById("plane");
var light = document.getElementById("light");
var mask = document.getElementById("mask");

function loop() {
    texture(plane, "http://www.keithclark.co.uk/-/images/logo-keithclark.png", ry, light.checked, mask.checked);
    ry = (ry + .025) % (Math.PI * 2);
}
    
setInterval(loop,20);

<div class="panel">Note: reducing the size of this window in Chrome causes rendering issues with <code>-webkit-mask-image</code></div>
<div class="panel">
    <label><input id="light" type="checkbox" checked> Lighting</label>
    <label><input id="mask" type="checkbox" checked> Mask</label>
</div>
<div id="plane"></div>
html,body {
    height:100%;
}
body {
    -webkit-perspective:700px;
    font:90%/1.2 Arial
}
html {
    background: url(http://lorempixel.com/400/200/abstract/2/);
    background-size:100% 100%;
}
label {
    margin-right:1em
}
#plane {
    width:532px;
    height:77px;
    margin:auto;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-38px;
    margin-left:-266px;
}
.panel {
    box-sizing: border-box;
    background: rgba(40,40,40,0.65);
    padding:0.5em;
    width:100%;
    color:#ccc;
    text-shadow:0 1px 0 #000;
}
.panel:first-of-type {
    position: absolute;
    bottom: 0;
}