Skip to content

Instantly share code, notes, and snippets.

@jeremyharris

jeremyharris/gist:2032026

Created March 13, 2012 21:56
Show Gist options
  • Save jeremyharris/2032026 to your computer and use it in GitHub Desktop.
Save jeremyharris/2032026 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Jeremy Harris created this gist Mar 13, 2012.
    91 changes: 91 additions & 0 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,91 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>translate/perspective test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
    .wrapper {
    position: absolute;
    left: 50%;
    top: 50%;

    -webkit-transform-origin-x: 0%;
    -webkit-transform-origin-y: 0%;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    -webkit-transform:
    translate(-50%, -50%);

    -moz-transform-origin: left top;
    -moz-transform-style: preserve-3d;
    -moz-perspective: 1000px;
    -moz-transform:
    translate(-50%, -50%);
    }
    .viewport {
    position: absolute;

    -webkit-transform-origin-x: 0%;
    -webkit-transform-origin-y: 0%;
    -webkit-transform-style: preserve-3d;
    -webkit-transform:
    translate(-50%, -50%)
    translate3d(0px, 0px, 500px);

    -moz-transform-origin: left top;
    -moz-transform-style: preserve-3d;
    -moz-transform:
    translate(-50%, -50%)
    translate3d(0px, 0px, 500px);
    }
    .foo, .bar, .baz {
    height: 200px;
    width: 100px;
    position: absolute;

    font-weight: bold;
    color: green;

    -webkit-transform-style: preserve-3d;

    -moz-transform-style: preserve-3d;
    }
    .foo {
    -webkit-transform:
    translate(-50%, -50%)
    translate3d(0px, 0px, 100px);

    -moz-transform:
    translate(-50%, -50%)
    translate3d(0px, 0px, 100px);
    }
    .bar {
    -webkit-transform:
    translate(-50%, -50%)
    translate3d(0px, 0px, 1500px);

    -moz-transform:
    translate(-50%, -50%)
    translate3d(0px, 0px, 1500px);
    }
    .baz {
    -webkit-transform:
    translate(-50%, -50%)
    translate3d(0px, 0px, -200px);

    -moz-transform:
    translate(-50%, -50%)
    translate3d(0px, 0px, -200px);
    }
    </style>
    </head>
    <body>
    <div class="wrapper">
    <div class="viewport">
    <div class="foo">Foo</div>
    <div class="bar">Bar</div>
    <div class="baz">Baz</div>
    </div>
    </div>
    </body>
    </html>