acko.net 3D object scrolling

dabblet.css

/**
 * acko.net 3D object scrolling
 * <3<3 Steven Wittens
 */

body {
  font-family: sans-serif;
}

#env {
  -webkit-perspective: 1000;
  width: 260px;
  height: 600px;
  border: 2px solid;
  overflow-y: scroll;
  overflow-x: hidden;
}

#host {
  -webkit-transform-style: preserve-3d;;
  height: 1500px;
  width: 100%;
}

p {  font-size: 20px; margin 0; padding: 0; }

.cube {
  margin: 0;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 20px;
  top: 0;
  -webkit-transform-style: preserve-3d;
}

.cube .face {
  width: 196px;
  height: 196px;
  border: 2px solid;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
  line-height: 200px;
  font-size: 140px;
  background: transparent;
}

.cube .face:nth-child(1) {
  background: hsla( 0, 100%, 50%, 0.3 );
  -webkit-transform: translateZ( 100px );
}

.cube .face:nth-child(2) {
  background: hsla( 60, 100%, 50%, 0.3 );
  -webkit-transform: rotateY( -90deg ) translateZ( 100px );
}

.cube .face:nth-child(3) {
  background: hsla( 120, 100%, 50%, 0.3 );
  -webkit-transform: rotateY( 90deg ) translateZ( 100px );
}

.cube .face:nth-child(4) {
  background: hsla( 180, 100%, 50%, 0.3 );
  -webkit-transform: rotateY( 180deg ) translateZ( 100px );
}

.cube .face:nth-child(5) {
  background: hsla( 240, 100%, 50%, 0.3 );
  -webkit-transform: rotateX( 90deg ) translateZ( 100px );
}

.cube .face:nth-child(6) {
  background: hsla( 300, 100%, 50%, 0.3 );
  -webkit-transform: rotateX( -90deg ) translateZ( 100px );
}

#c1  { -webkit-transform: translate3d( 0,  100px, -100px ); }
#c2  { -webkit-transform: translate3d( 0,  400px, -100px ); }
#c3  { -webkit-transform: translate3d( 0,  700px, -100px ); }
#c4  { -webkit-transform: translate3d( 0, 1000px, -100px ); }

#c5  { -webkit-transform: translate3d( 0,  100px, -600px ); }
#c6  { -webkit-transform: translate3d( 0,  400px, -600px ); }
#c7  { -webkit-transform: translate3d( 0,  700px, -600px ); }
#c8  { -webkit-transform: translate3d( 0, 1000px, -600px ); }

#c9  { -webkit-transform: translate3d( 0,  100px, -1100px ); }
#c10 { -webkit-transform: translate3d( 0,  400px, -1100px ); }
#c11 { -webkit-transform: translate3d( 0,  700px, -1100px ); }
#c12 { -webkit-transform: translate3d( 0, 1000px, -1100px ); }

dabblet.html

<p>3D scrolling. Uncovered by <a href="http://acko.net/blog/making-love-to-webkit/">Steven Wittens</a>. Safari & Chrome Canary</p>

<div id="env">
  <div id="host">

    <figure id="c1" class="cube">
      <div class="face f1">1</div>
      <div class="face f2">2</div>
      <div class="face f3">3</div>
      <div class="face f4">4</div>
      <div class="face f5">5</div>
      <div class="face f6">6</div>
    </figure>

    <figure id="c2" class="cube">
      <div class="face f1">1</div>
      <div class="face f2">2</div>
      <div class="face f3">3</div>
      <div class="face f4">4</div>
      <div class="face f5">5</div>
      <div class="face f6">6</div>
    </figure>

    <figure id="c3" class="cube">
      <div class="face f1">1</div>
      <div class="face f2">2</div>
      <div class="face f3">3</div>
      <div class="face f4">4</div>
      <div class="face f5">5</div>
      <div class="face f6">6</div>
    </figure>

    <figure id="c4" class="cube">
      <div class="face f1">1</div>
      <div class="face f2">2</div>
      <div class="face f3">3</div>
      <div class="face f4">4</div>
      <div class="face f5">5</div>
      <div class="face f6">6</div>
    </figure>

    <figure id="c5" class="cube">
      <div class="face f1">1</div>
      <div class="face f2">2</div>
      <div class="face f3">3</div>
      <div class="face f4">4</div>
      <div class="face f5">5</div>
      <div class="face f6">6</div>
    </figure>

    <figure id="c6" class="cube">
      <div class="face f1">1</div>
      <div class="face f2">2</div>
      <div class="face f3">3</div>
      <div class="face f4">4</div>
      <div class="face f5">5</div>
      <div class="face f6">6</div>
    </figure>

    <figure id="c7" class="cube">
      <div class="face f1">1</div>
      <div class="face f2">2</div>
      <div class="face f3">3</div>
      <div class="face f4">4</div>
      <div class="face f5">5</div>
      <div class="face f6">6</div>
    </figure>

    <figure id="c8" class="cube">
      <div class="face f1">1</div>
      <div class="face f2">2</div>
      <div class="face f3">3</div>
      <div class="face f4">4</div>
      <div class="face f5">5</div>
      <div class="face f6">6</div>
    </figure>

    <figure id="c9" class="cube">
      <div class="face f1">1</div>
      <div class="face f2">2</div>
      <div class="face f3">3</div>
      <div class="face f4">4</div>
      <div class="face f5">5</div>
      <div class="face f6">6</div>
    </figure>

    <figure id="c10" class="cube">
      <div class="face f1">1</div>
      <div class="face f2">2</div>
      <div class="face f3">3</div>
      <div class="face f4">4</div>
      <div class="face f5">5</div>
      <div class="face f6">6</div>
    </figure>

    <figure id="c11" class="cube">
      <div class="face f1">1</div>
      <div class="face f2">2</div>
      <div class="face f3">3</div>
      <div class="face f4">4</div>
      <div class="face f5">5</div>
      <div class="face f6">6</div>
    </figure>

    <figure id="c12" class="cube">
      <div class="face f1">1</div>
      <div class="face f2">2</div>
      <div class="face f3">3</div>
      <div class="face f4">4</div>
      <div class="face f5">5</div>
      <div class="face f6">6</div>
    </figure>

  </div>
</div>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}