Skip to content

Instantly share code, notes, and snippets.

@abernier

abernier/index.css

Created January 6, 2012 13:32
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save abernier/1570606 to your computer and use it in GitHub Desktop.
Save abernier/1570606 to your computer and use it in GitHub Desktop.
Download ZIP
CSS 3D cube
Raw
index.css
/*
variables:
a = 5em
2.5em = a / 2
*/
.cube,
.cube > * {display:block; width:5em; height:5em;}
.cube > * {position:absolute;}
.cube > .front {-webkit-transform: translateZ( 2.5em);}
.cube > .back {-webkit-transform: translateZ(-2.5em);}
.cube > .right {-webkit-transform:rotateY( 90deg) translateZ( 2.5em);}
.cube > .left {-webkit-transform:rotateY(-90deg) translateZ( 2.5em);}
.cube > .top {-webkit-transform:rotateX( 90deg) translateZ( 2.5em);}
.cube > .bottom {-webkit-transform:rotateX(-90deg) translateZ( 2.5em);}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title></title>
<style>
body {text-align:center; -webkit-perspective:15em; -webkit-transform-style:preserve-3d; /*-webkit-perspective-origin:50% 50%;*/ margin:10em;}
.cube {display:inline-block!important;}
.cube > * {box-shadow:0 0 1px black inset; background-color:rgba(255,255,255,.5); text-align:center;}
.cube > [class]:before {content:"." attr(class); position:absolute; line-height:0; top:50%; display:block;width:100%;margin:0 auto;}
</style>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="right"></div>
<div class="left"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment