#container
 - 13.times do |i|
  %div{:class=> "cube", :id=>"level#{i}"}
   %div{:class=> "face face0"}
   %div{:class=> "face face1"}
   %div{:class=> "face face2"}
   %div{:class=> "face face3"}

.credit 

%a{:href=>"http://thepatternlibrary.com/#escape-flight"} Image courtesy of The Pattern Library
%br
%a{:href=>"https://codepen.io/dehash/pen/mBnsG"} Cross platform update of this pen
View Compiled
@import "compass/css3";

 /**************************************************/
/* INSTRUCTIONS: DRAG OVER THE IMAGE TO TWIST IT */
/**************************************************/
/*based original css on simple cube @  http://dabblet.com/gist/4576285 then just experiemented */
body {
  	perspective: 11200px;
	background-color:#333;
}
.cube {
  position: absolute;
 // width: 30px;
 // height: 8px;
  list-style: none;

}
.face {
//  opacity:0.9;
  box-sizing: border-box;
  position: absolute;
  top: 50px;
  left: 350px;
 // padding: 24px;
  width: 320px;
  height: 48px;
  background: lightblue; 
  
/* cool image from http://thepatternlibrary.com/#escape-flight */
//background:url("https://i.imgur.com/Gp6NAyA.png") -10px -10px;
  background:url("https://res.cloudinary.com/dbie43oob/image/upload/v1473334800/Gp6NAyA_asqaax.png") -10px -10px;
background-repeat: no-repeat;
backface-visibility: hidden;
}
a{
 color:#ccc; 
}
View Compiled
/* Twisty thing - more cross browser - in CSS/JS by dehash.com released under MIT License https://opensource.org/licenses/MIT */

// Update - working on making it cross browser, faster, using fewer resources, and running on the GPU in all browsers & devices  -
// as a result of the updates this example now works in IE10 and iPad, & much faster in Firefox, about the same in chrome - more tweaks to do -

// A very useful pen for IE10 CSS 3D - https://codepen.io/thebabydino/details/bdvya

//Note: for iPad & touch screens view click Share then Full Page

// work in progress - just playing around to try to get some interesting effects - drag over the image it should twist around in some sort of css3d space - should work in chrome and FF not sure about ie - seen similar ideas for displaying graphics many times but i think one of the best was an old flash one by yugop.com but I cannot find it online anymore and it has been done many times since.
var self = window;
(function(self) {
  var ww = 100, wh = 100, touchEnabled, md = false, raf, mouseX = 0, mouseY = 0, vpx = ww / 2, vpy = wh / 2,
    gap = 0, slow = 7, oldMouseX = 0, numLevels = 13,
    currentLevel = 0, gaps = [], gapscnt = 0, vx = [],
    px = [], styles = [];

  function init() {
    onResizeHandler();
    addListeners();
    draw();
    loop();
  }

  function addListeners() {
    touchEnabled = 'ontouchstart' in window || navigator.msMaxTouchPoints;
    if (touchEnabled == true) {
      console.log("touchEnabled");
      document.addEventListener('touchmove', onTouchMove, false);
      document.addEventListener('touchstart', onTouchStart, false);
      document.addEventListener('touchend', onTouchEnd, false);
    } else {
      console.log("mouseEnabled");
      document.addEventListener('mousemove', onMouseMove, false);
      document.addEventListener('mousedown', onMouseDown, false);
      document.addEventListener('mouseup', onMouseUp, false);
    }
    addEventListener('resize', onResizeHandler, false);
  }

  function draw() {
    var d = 0.12,
      p = 3;
    styles = ["  ", " rotateY(180deg)", " rotateY(90deg)", "  rotateY(-90deg)"];
    for (var i = 0; i < numLevels; i++) {
      var posString = "-315px " + (10 + (-48 * i)) + "px";
      $('#level' + i + '> div').css("backgroundPosition", posString);
      $('#level' + i).css("top", i * 54);
      vx.push(0);
      px.push(1);
    }

    $('#level0').css("visibility", "hidden");
    $('#level12').css("visibility", "hidden");


    $('#container').mousedown(function(e) {
      var n = Math.floor((e.pageY - 50) / 54);
      currentLevel = n;
    })
    $('#container').bind('touchstart', function(e) {
      var touch = event.touches[0];
      var n = Math.floor((touch.pageY - 50) / 54);
      currentLevel = n;
    })
  }

  function loop() {
    update();
    render();
    raf = requestAnimFrame(loop);
  }

  function update() {
    if (md) {
      gap = averageGaps(mouseX - oldMouseX);
    }
    gap *= .97;
    px[currentLevel] += gap;
    oldMouseX = mouseX;
    var i;
    for (i = 1; i < numLevels - 1; i++) {
      if (i != currentLevel) {
        var ax = (px[i + 1] + px[i - 1] - px[i] / 0.5) / 11;
        vx[i] = (vx[i] + ax) / 1.25;
        px[i] += vx[i];
      }
    }
    px[0] = px[1];
    px[numLevels - 1] = px[numLevels - 2];
  }

  function render() {
    for (var i = 1; i < numLevels - 1; i++) {
      for (var j = 0; j < 4; j++) {
        $('#level' + i + '> div.face' + j).css("transform", styles[j] + " rotateY(" + px[i] + "deg) perspective(1200px) translateZ(160px) ");
      };
    }
  }

  function onResizeHandler() {
    ww = window.innerWidth;
    wh = window.innerHeight;
    vpx = ww / 2;
    vpy = wh / 2;
  };

  function onMouseMove(event) {
    event.preventDefault();
    mouseX = event.clientX;
    mouseY = event.clientY;
  }

  function onMouseDown(event) {
    event.preventDefault();
    gaps.length = 0;
    md = true;
  }

  function onMouseUp(event) {
    event.preventDefault();
    md = false;
  }

  function onTouchMove(event) {
    event.preventDefault();
    var touch = event.touches[0];
    mouseX = touch.pageX;
    mouseY = touch.pageY;
  }

  function onTouchStart(event) {
    event.preventDefault();
    gaps.length = 0;
    md = true;
  }

  function onTouchEnd(event) {
    event.preventDefault();
    md = false;
  }

  function averageGaps(n) {
    if (isNaN(n)) {
      return 0;
    }
    var gl = gaps.length;
    gaps[gapscnt] = n;
    var ave = 0;
    for (var i = 0; i < gl; i++) {
      ave += gaps[i];
    };
    gapscnt = (gapscnt + 1) % 10;
    var tmp = ave / gl;
    if (isNaN(tmp)) {
      tmp = 0;
    }
    return tmp;
  }
  window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function(callback) {
        window.setTimeout(callback, 1000 / FPS);
    };
  })();
  window.addEventListener ? window.addEventListener('load', init, false) : window.onload = init;
})(self);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js