<h3>Floating Barrel Demo</h3>

html, body {
  height: 100%;
}
body {
  font: 12px/1.2 Arial;
  perspective: 600px;
  perspective: 600px;
  background: #666;
  background: linear-gradient(#222,#222,#444);
  color: #fff;
  text-align:center;
}
.threedee {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  transform-origin: 50% 50% 50%;
  backface-visibility: hidden;
}
.assembly {
  animation: spin 4s linear infinite;
}
#box-toggle:checked ~ .assembly .face {
  outline: 1px solid #000;
  background: #fff !important;
  backface-visibility: visible;
}
@keyframes spin {
  to {
    transform: rotateY(360deg) rotateZ(360deg) rotateX(720deg);
  }
}

var DRUM_TEXTURE = "http://visualsolutions-inc.com/pages/images/techdemomedia/drumtexture1.png";

// Assembiles are for grouping faces and other assembiles
function createAssembly() {
    var assembly = document.createElement("div");
    assembly.className = "threedee assembly";
    return assembly;
}

function createFace(w, h, x, y, z, rx, ry, rz, tsrc, tx, ty) {
    var face = document.createElement("div");
    face.className = "threedee face";
    face.style.cssText = PrefixFree.prefixCSS(
        "background: url(" + tsrc + ") -" + tx.toFixed(2) + "px " + ty.toFixed(2) + "px;" +
        "width:" + w.toFixed(2) + "px;" +
        "height:" + h.toFixed(2) + "px;" +
        "margin-top: -" + (h / 2).toFixed(2) + "px;" +
        "margin-left: -" + (w / 2).toFixed(2) + "px;" +
        "transform: translate3d(" + x.toFixed(2) + "px," + y.toFixed(2) + "px," + z.toFixed(2) + "px)" +
        "rotateX(" + rx.toFixed(2) + "rad) rotateY(" + ry.toFixed(2) + "rad) rotateY(" + rz.toFixed(2) + "rad);");
    return face;
}

function createTube(dia, height, sides, texture) {
    var tube = createAssembly();
    var sideAngle = (Math.PI / sides) * 2;
    var sideLen = dia * Math.tan(Math.PI/sides);
    for (var c = 0; c < sides; c++) {
        var x = Math.sin(sideAngle * c) * dia / 2;
        var z = Math.cos(sideAngle * c) * dia / 2;
        var ry = Math.atan2(x, z);
        tube.appendChild(createFace(sideLen + 1, height, x, 0, z, 0, ry, 0, texture, sideLen * c, 0));
    }
    return tube;
}

function createBarrel() {
    var barrel = createTube(100, 196, 20, DRUM_TEXTURE);
    barrel.appendChild(createFace(100, 100, 0, -98, 0, Math.PI / 2, 0, 0, DRUM_TEXTURE, 0, 100));
    barrel.appendChild(createFace(100, 100, 0, 98, 0, -Math.PI / 2, 0, 0, DRUM_TEXTURE, 0, 100));
    return barrel;
}

document.body.appendChild(createBarrel());