Skip to content

Instantly share code, notes, and snippets.

@abernier
Created July 14, 2012 13:02
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 abernier/3111167 to your computer and use it in GitHub Desktop.
Save abernier/3111167 to your computer and use it in GitHub Desktop.
gauge
html {-webkit-perspective:250;}
body {width:100%; height:100%; position:relative;}
body, body * {-webkit-transform-style:preserve-3d;}
.cube,
.cube > .top,
.cube > .front,
.cube > .right,
.cube > .back,
.cube > .left,
.cube > .bottom {display:block; width:100px; height:100px;}
.cube {position:relative;}
.cube > .top,
.cube > .front,
.cube > .right,
.cube > .back,
.cube > .left,
.cube > .bottom {position:absolute; -webkit-backface-visibility:visible;}
.cube > .top {-webkit-transform:rotateX( 90deg) translateZ( 50px);}
.cube > .front {-webkit-transform: translateZ( 50px);}
.cube > .right {-webkit-transform:rotateY( 90deg) translateZ( 50px);}
.cube > .back {-webkit-transform:rotateY(180deg) translateZ( 50px);}
.cube > .left {-webkit-transform:rotateY(-90deg) translateZ( 50px);}
.cube > .bottom {-webkit-transform:rotateX(-90deg) translateZ( 50px) rotate(180deg);}
.cube > .top,
.cube > .front,
.cube > .right,
.cube > .back,
.cube > .left,
.cube > .bottom {-webkit-box-sizing:border-box; border:1px solid; background-color:rgba(0,0,0,.2);}
.gauge {-webkit-animation:presenter 10s infinite linear;}
.gauge .cube {-webkit-transform-origin:0px 100px -50px; -webkit-animation:shrink 1s infinite alternate;}
@-webkit-keyframes shrink {
0% {-webkit-transform:scale3d(0,0,0);}
100% {-webkit-transform:scale3d(1,1,1);}
}
@-webkit-keyframes presenter {
0% {-webkit-transform:translate(27em,13em) rotateY(0deg);}
100% {-webkit-transform:translate(27em,13em) rotateY(360deg);}
}
<!DOCTYPE>
<html>
<head>
<meta charset=utf-8>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="gauge cube">
<div class="back"></div>
<div class="left"></div>
<div class="bottom"></div>
<div class="cube">
<div class="top"></div>
<div class="front"></div>
<div class="right"></div>
<div class="back"></div>
<div class="left"></div>
<div class="bottom"></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment