Skip to content

Instantly share code, notes, and snippets.

@oli

oli/dabblet.css

Created December 16, 2011 16:19
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/1486681 to your computer and use it in GitHub Desktop.
Save oli/1486681 to your computer and use it in GitHub Desktop.
Download ZIP
Comparing perspective to perspective()
Raw
dabblet.css
/* Comparing perspective to perspective() */
body {margin-top: 48px;}
.x {float: left;
width: 100px;
height: 100px;
border: 1px solid #ccc;}
.x div {width: 100%;
height: 100%;}
.a div {
transform: perspective(200px) rotateY(45deg);
background-color: #789;}
.b {perspective: 200px;}
.b div {transform: rotateY(45deg);
background-color: #897;
}
.c {margin-left: 48px;}
.c, .d {width: 20%;
height: 100px;}
.c div {transform: perspective(200px) rotateY(45deg);
background-color: #978;}
.d {perspective: 200px;}
.d div {transform: rotateY(45deg);
background-color: #987;}
section {padding-top: 24px;}
section, p {clear: left;}
.origin div div {transform-origin: 0 50%;}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<h1>Comparing <code>perspective</code> to <code>perspective()</code></h1>
<section>
<p>with no/default <code>transform-origin</code></p>
<div class="a x"><div>perspective()</div></div>
<div class="b x"><div>perspective on wrapper</div></div>
<div class="c x"><div>perspective()</div></div>
<div class="d x"><div>perspective on wrapper</div></div>
</section>
<section class="origin">
<p>with <code>transform-origin: 0 50%;</code></p>
<div class="a x"><div>perspective()</div></div>
<div class="b x"><div>perspective on wrapper</div></div>
<div class="c x"><div>perspective()</div></div>
<div class="d x"><div>perspective on wrapper</div></div>
</section>
<p>Without <code>transform-origin</code> there’s no difference between <code>perspective</code> on wrapper and <code>perspective()</code>. With it
<code>perspective()</code> is noticeably stronger.
Raw
settings.json
{"page":"css","view":"split"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment