Skip to content

Instantly share code, notes, and snippets.

@levifig

levifig/dabblet.css

Created January 17, 2012 05:21
Download ZIP

Revisions

  1. Levi Figueira created this gist Jan 17, 2012.
    96 changes: 96 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,96 @@


    /**
    * 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 ); }

    115 changes: 115 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,115 @@
    <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>
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","prefixfree":"1","page":"css"}