Skip to content

Instantly share code, notes, and snippets.

@iamvdo

iamvdo/dabblet.css

Forked from cedricici/dabblet.css
Created March 27, 2012 14:31
Show Gist options
  • Save iamvdo/2216432 to your computer and use it in GitHub Desktop.
Save iamvdo/2216432 to your computer and use it in GitHub Desktop.
Download ZIP
3D Transform (style,backface)
Raw
dabblet.css
/**
* 3D Transform (style,backface)
*/
section{
margin-top:100px;
width:1200px;
height:700px;
background:white;
padding:20px;
perspective:600px;
display:table-cell;
vertical-align:middle;
/*perspective-origin:-300px 50%;*/
}
header{
width:300px;
height:300px;
margin: auto;
background:orangered;
border:3px solid darkred;
transform:rotateY(130deg);
transform-style:flat;
backface-visibility:hidden;
transform-style:preserve-3d;
}
h3{
font:2em sans-serif;
width:150px;
height:150px;
background: deepskyblue;
border:2px solid dodgerblue;
margin:65px auto;
transform:translateZ(100px) rotateX(45deg);
transform-style:preserve-3d;
}
span{
font-weight:bold;
transform:translateZ(25px);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<section>
<header>
<h3><span>BugDroid<span></h3>
</header>
</section>
Raw
settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment