Skip to content

Instantly share code, notes, and snippets.

@avaitla

avaitla/gist:5478692

Created April 28, 2013 22:34
Show Gist options
  • Save avaitla/5478692 to your computer and use it in GitHub Desktop.
Save avaitla/5478692 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<!-- saved from url=(0046)http://www.paulrhayes.com/experiments/cube-3d/ -->
<html lang="en" id="paulrhayes-com" class="js csstransforms3d csstransitions wf-adobecaslonpro1-n4-active wf-adobecaslonpro1-n7-active wf-swingdancer1-n5-active wf-active"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Hey there, thanks for looking at the source. Skip down until you see the experiment start comments -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Paul Hayes: Experiment: 3D CSS cube, use arrow keys to rotate</title>
<meta name="description" content="Use up, down, left and right keys to navigate a 3D cube, built using CSS perspective, transform and transition properties.">
<meta name="keywords" content="css, css3, 3d, cube, webkit, css cube, transition, transform, webkit-transform, webkit-transition, webkit-perspective">
<meta name="author" content="Paul Hayes">
<script async="" src="./experiment_files/ga.js"></script><script>(function(d){d.className=d.className.replace(/^no-js\b/,'js');}(document.documentElement));</script>
<link rel="canonical" href="./experiment_files/experiment.htm">
<link rel="stylesheet" href="http://www.paulrhayes.com/css/master.css?13">
<link rel="alternate" type="application/rss+xml" href="http://feeds.feedburner.com/prhayes" title="Paul Hayes RSS">
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="./experiment_files/fdb0guo.js"></script>
<style type="text/css">.swing{font-family:"swingdancer-1","swingdancer-2",cursive;}.caslon{font-family:"adobe-caslon-pro-1","adobe-caslon-pro-2",serif;}</style><link rel="stylesheet" href="http://use.typekit.com/c/237661/adobe-caslon-pro-1:n4:n7,swingdancer-1:n5.XWr:F:1,XWn:F:1,NFK:F:2/d?3bb2a6e53c9684ffdc9a99f51f5b2a62bc2901c2ca82ea746ff83850faad353a9612d3139ba843f7715fbf7a7ae736cc37dec059ef1d5091b7a55a838bc8be35e1825b2a8d1027e87cdaf87cd1055be207fdc9d14e62f267ec281f3719ce0a7031fc4b982b7176ad441c6d4a546bb3e49cefc3a136888e152b313cf02a9d177bc68fa0e2afbb9977e006671eb43c6feb57d854c37dd0ad1cb628f2f68c75efccb3d23d92fbaa82da6e8217ae3b949cc2e9ba6fa64474728a449ae73899434d213a3330deadd14df4a82cb1bb08e7985a4b7f43344ebbd0941231f6358edb73ac61c5d2b5c539b7deb0d2dee5d6547d86b078b03f678b8d7960eda151499f9c7d8741ffb1a153dbb7de9b9de59e5ce35dbdae3cf8c01c47c82d0dd625bef46bf35eb82fe676a349adc02468d1fe6b36a787e0d925eeade2d2f8d145ecc36a505e84e09c999b3507566beea3073d5bdc"><script>try{Typekit.load();}catch(e){}</script>
</head>
<body class="experiment" style="zoom: 1;" data-twttr-rendered="true">
<div class="wrapper">
<header class="masthead">
<div>
<a class="title" rel="home" href="http://www.paulrhayes.com/">Paul Hayes</a>
<span>»</span>
<h1>
<a href="http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/" rel="parent" title="Article">3D CSS cube, use arrow keys to rotate</a> </h1>
</div>
<aside class="fb">
<iframe src="./experiment_files/like.htm" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe>
</aside>
<aside class="tweet-this">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="./experiment_files/tweet_button.1366232305.htm" class="twitter-share-button twitter-count-horizontal" style="width: 109px; height: 20px;" title="Twitter Tweet Button" data-twttr-rendered="true"></iframe>
</aside>
</header>
<p class="learn">This is a demo, <a href="http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/">learn how it works</a>. <a href="https://github.com/fofr/paulrhayes.com-experiments/tree/master/cube-3d">Fork on Github</a>.</p>
<div class="test test-3dtransforms">
<!-- ************************** -->
<!-- START OF EXPERIMENT -->
<!-- ************************** -->
<style>
#experiment {
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 200px;
-moz-perspective: 800;
-moz-perspective-origin: 50% 200px;
}
#cube {
position: relative;
margin: 100px auto 0;
height: 400px;
width: 400px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
}
.face {
position: absolute;
height: 360px;
width: 360px;
padding: 20px;
background-color: rgba(50, 50, 50, 0.7);
font-size: 27px;
line-height: 1em;
color: #fff;
border: 1px solid #555;
border-radius: 3px;
}
#cube .one {
-webkit-transform: rotateX(90deg) translateZ(200px);
-moz-transform: rotateX(90deg) translateZ(200px);
}
#cube .two {
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(200px);
-moz-transform: rotateY(90deg) translateZ(200px);
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(200px);
-moz-transform: rotateY(180deg) translateZ(200px);
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(200px);
-moz-transform: rotateY(-90deg) translateZ(200px);
}
#cube .six {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
}
</style>
<div id="experiment">
<div id="cube">
<div class="face one">
One face
</div>
<div class="face two">
Up, down, left, right
</div>
<div class="face three">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="face four">
New forms of navigation are fun.
</div>
<div class="face five">
Rotating 3D cube
</div>
<div class="face six">
<img src="./experiment_files/sonic.gif">
</div>
</div>
</div>
<!-- ************************** -->
<!-- END OF EXPERIMENT -->
<!-- ************************** -->
</div> <div class="test-3dtransforms-fallback fallback">
<p>Uh-oh, your browser has <strong>no support for 3D CSS transforms</strong>. This video will show you what you’re missing. <a href="http://www.paulrhayes.com/experiments/cube-3d/#experiment" class="show-experiment">Show me the experiment anyway</a>.</p>
<iframe src="./experiment_files/19501077.htm" width="600" height="400" frameborder="0"></iframe> <p><a href="http://www.twitter.com/fofr">Follow me on Twitter (@fofr)</a></p>
</div>
</div>
<script src="./experiment_files/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="/js/jquery-1.9.0.min.js"><\/script>')</script>
<script>
$(function(){
$('.show-experiment').on('click', function(evt) {
evt.preventDefault();
$('.fallback').fadeOut('slow', function() {
$('.test').fadeIn('slow');
});
});
});
</script>
<script src="./experiment_files/3dtransforms.js"></script><script>
var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
prop,
el = document.createElement('div');
for(var i = 0, l = props.length; i < l; i++) {
if(typeof el.style[props[i]] !== "undefined") {
prop = props[i];
break;
}
}
var xAngle = 0, yAngle = 0;
$('body').keydown(function(evt) {
switch(evt.keyCode) {
case 37: // left
yAngle -= 90;
break;
case 38: // up
xAngle += 90;
break;
case 39: // right
yAngle += 90;
break;
case 40: // down
xAngle -= 90;
break;
};
document.getElementById('cube').style[prop] =
"rotate3d(-1,0,0,"+xAngle+"deg) rotate3d(0,1,0,"+yAngle+"deg)";});
</script>
<script src="./experiment_files/widgets.js"></script>
<script>var _gaq=[['_setAccount','UA-59763-15'],['_trackPageview']];(function(d,t){
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.async=1;g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)
}(document,'script'))</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment