Skip to content

Instantly share code, notes, and snippets.

@WebInspectInc

WebInspectInc/dabblet.css

Created February 2, 2012 19:24
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 WebInspectInc/1725234 to your computer and use it in GitHub Desktop.
Save WebInspectInc/1725234 to your computer and use it in GitHub Desktop.
Download ZIP
3D Transforms Tests
Raw
dabblet.css
/**
* 3D Transforms Tests
*/
div, div:before {
color:white;
position:absolute;
width:500px;height:200px;
background:rgba(31, 111, 155,1);
transition:all 2s linear;
perspective:200px;
z-index:1;
}
input[type="radio"]:checked + div {
transform-origin:50% 50% 30%;
transform:rotateY(180deg);
}
input[type="radio"]:checked + div:before {
transform:translateZ(0px) rotateY(0);
}
div:before {
content:"Ho";
background:rgba(173, 0, 0,1);
transform:translateZ(-12px) rotateY(180deg);
z-index:-1;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<input type="radio" name="r-button" checked />
<input type="radio" name="r-button" />
<div>Howdy</div>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment