Skip to content

Instantly share code, notes, and snippets.

@oli

oli/dabblet.css

Created February 2, 2012 15:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oli/1723865 to your computer and use it in GitHub Desktop.
Save oli/1723865 to your computer and use it in GitHub Desktop.
Download ZIP
checking 4-value perspective-origin
Raw
dabblet.css
/* checking 4-value perspective-origin */
/* webkit currently ignores last two values */
/* should be treated like http://dev.w3.org/csswg/css3-background/#the-background-position */
div {
width: 100px;
height: 100px;
margin: 24px;
border: 5px solid #999;
border-radius: 5px;
padding: 3px;
transition: all 1s;
}
.box1 {transform: perspective(800px) rotateY(45deg); perspective-origin: right bottom;}
.box2 {transform: perspective(800px) rotateY(45deg); perspective-origin: right 10px bottom 20px;}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="box1">box1</div>
<div class="box2">box2</div>
Raw
settings.json
{"version":"1.1","settings":{"prefixfree":"1"},"view":[{"template":"r\nc\n","active":true,"seethrough":false},{"template":"r\nh","active":false,"seethrough":false},{"template":"r\nch","active":false,"seethrough":false},{"template":"r","active":false,"seethrough":false}]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment