css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              #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
            
          
!
            
              @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; 
}
            
          
!
            
              /* 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);
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console