Edit in JSFiddle

function texture(elm, image, angle, d, addLight, addMask) {
    var t = (Math.sin(angle)/2)
    var stop1 = 0.5 + t;
    var stop2 = 1 - stop1;

    if (d > 0 && d < layerCount-1) {
       stop1 /= 2
       stop2 = 0.5-stop1;
    }

    var cssText = "-webkit-transform: translateZ("+(-d)+"px) ;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 group = document.getElementById("group");
var light = document.getElementById("light");
var mask = document.getElementById("mask");
var layerCount = group.children.length;

function loop() {
    for (var c=0; c<layerCount; c++) {
        texture(group.children[c], "http://www.keithclark.co.uk/-/images/logo-keithclark.png", ry, c, light.checked, mask.checked);
    }
    ry = (ry + .025) % (Math.PI * 2);
    group.style.cssText = "-webkit-transform: rotateY(" + ry + "rad);"
}
    
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="group">
    <div class="plane"></div>
    <div class="plane"></div>
    <div class="plane"></div>
    <div class="plane"></div>
    <div class="plane"></div>
    <div class="plane"></div>
    <div class="plane"></div>
    <div class="plane"></div>
    <div class="plane"></div>
    <div class="plane"></div>
    <div class="plane"></div>
</div>

html,body {
    height:100%;
}
body {
    -webkit-perspective:700px;
    -webkit-transform-style: preserve-3d;
    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;
}
#group { 
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform-style: preserve-3d;
}