Skip to content

Instantly share code, notes, and snippets.

@skylamer

skylamer/dabblet.css

Forked from levifig/dabblet.css
Created January 18, 2012 14:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save skylamer/1633204 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save skylamer/1633204 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. skylamer revised this gist Jan 18, 2012. No changes.
  2. 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"}