Skip to content

Instantly share code, notes, and snippets.

@manikrathee

manikrathee/gist:3837186

Created October 4, 2012 23:49
Show Gist options
  • Save manikrathee/3837186 to your computer and use it in GitHub Desktop.
Save manikrathee/3837186 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 3d Box
Raw
gistfile1.html
<!DOCTYPE HTML>
<html>
<head>
<style>
#rotate{
position: absolute;
top: 400px;
font-size: 20px;
background: #f3f3f3;
color: #333;
text-transform: uppercase;
font-family: sans-serif;
font-weight: bold;
}
#container{
-webkit-perspective: 0;
-webkit-perspective-origin: 10% 10%;
}
#box{
position: absolute;
top: 10%;
left: 50%;
width: 200px;
font-size: 40px;
text-align: center;
-webkit-transition: -webkit-transform 0.25s linear;
-webkit-transform-style: preserve-3d;
}
#box > div{
position: absolute;
width: 200px;
height: 200px;
text-align: center;
color: #f9f9f9;
opacity: 0.5;
}
/*#box > div:nth-child(1){
-webkit-transform: translate-z(200px);
}
#box > div:nth-child(2){
-webkit-transform: rotate-Y(90deg) translate-z(200px);
}
#box > div:nth-child(3){
-webkit-transform: rotate-Y(180deg) translate-z(200px);
}
#box > div:nth-child(4){
-webkit-transform: rotate-Y(-90deg) translate-z(200px);
}*/
#one{
-webkit-transform: translateZ(100px);
background: red;
}
#two{
-webkit-transform: rotateY(90deg) translateZ(100px);
background: green;
}
#three{
-webkit-transform: rotateY(180deg) translateZ(100px);
background: blue;
}
#four{
-webkit-transform: rotateY(270deg) translateZ(100px);
background: orange;
}
</style>
</head>
<body>
<div id="container">
<div id="box">
<div id="one">SIDE 1 </div>
<div id="two">SIDE 2</div>
<div id="three">SIDE 3</div>
<div id="four">SIDE 4</div>
</div>
</div>
<a id="rotate" href="#" title="rotate">Rotate</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var YRotation = 0;
var box = document.getElementById('box');
$('#rotate').click(function(e){
e.preventDefault();
console.log(YRotation);
YRotation -= 90;
// if (YRotation === -360){
// YRotation = 0
// }
console.log(YRotation);
box.style.webkitTransform = "rotateY("+YRotation+"deg)";
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment