public
Created

checking 4-value perspective-origin

  • Download Gist
dabblet.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14
/* 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;}
dabblet.html
HTML
1 2 3 4
<!-- content to be placed inside <body>…</body> -->
<div class="box1">box1</div>
 
<div class="box2">box2</div>
settings.json
JSON
1
{"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}]}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.