EffectHub.com: your best source for gaming

Recommendation

More Effects...

$(function(){

$('.front').click (function(e){
			$(this).parent().css("-webkit-transform" , "translateZ(200px)");
			$(this).parent().find('.face').css("background-color","#f00");
		});

$('.back').click (function(e){
			$(this).parent().css("-webkit-transform" , "translateZ(-200px)");
			$(this).parent().find('.face').css("background-color","#00f");
		});

$('.left').click (function(e){
			$(this).parent().css("-webkit-transform" , "translateX(-200px)");
			$(this).parent().find('.face').css("background-color","#ff0");
		});

$('.right').click (function(e){
			$(this).parent().css("-webkit-transform" , "translateX(200px)");
			$(this).parent().find('.face').css("background-color","#f0f");
		});

$('.top').click (function(e){
			$(this).parent().css("-webkit-transform" , "translateY(-200px)");
			$(this).parent().find('.face').css("background-color","#0f0");
		});

$('.bottom').click (function(e){
			$(this).parent().css("-webkit-transform" , "translateY(200px)");
			$(this).parent().find('.face').css("background-color","#0ff");
		});

var xangle=0,yangle=0,rotate=30;
		$(window).keydown(function(e){
			switch(e.keyCode){
				case 37:
					yangle-=rotate;
					break;

case 38:
					xangle+=rotate;
					break;

case 39:
					yangle+=rotate;
					break;

case 40:
					xangle-=rotate;
					break;
			}
			$('#space').css ({"-webkit-transform": "rotateX("+xangle+"deg) rotateY("+yangle+"deg)"})
		});
		$('#space').css ({"-webkit-transform": "rotateX("+-30+"deg) rotateY("+30+"deg)"})
	});

CSS

body {
  		background-color: rgb(155,155,155);
	}

#universe{
		zoom:0.5;
		-webkit-perspective: 1800;
		-webkit-transform-style: preserve-3d;
	}

#space{
		-webkit-transition: -webkit-transform 1s linear;
		-webkit-transform-origin:5% 50% 100px;
		margin-left:40%;
		margin-top:300px;
		position: relative;
		-webkit-transform-style: preserve-3d;
	}

.plane{
		position: absolute;
		-webkit-transform-style: preserve-3d;
		-webkit-transform-origin: center ;
	}

.container{
		position: relative;
		margin: 30px;
		float: right;
		-webkit-transform-origin: center ;
		-webkit-transform-style: preserve-3d;
	}

.cube{
		-webkit-transition: -webkit-transform 1s linear;
		position: relative;
      	margin: 40px auto;
      	height: 100px;
      	width: 100px;
      	-webkit-transform-style: preserve-3d;
      	-webkit-transform-origin: 50% 50% ;
	}

.p1{
		-webkit-transform : translateZ(00px);
	}

.p2{
		-webkit-transform : translateZ(150px);
	}

.p3{
		-webkit-transform : translateZ(300px);
	}

.p4{
		-webkit-transform : translateZ(450px);
	}

.face {
		opacity: 0.9;
		-webkit-transform-origin:50% 50%;
		background-color: rgb(0,0,0);
      	position: absolute;
      	height: 100px;
      	width: 100px;
      	font-size: 27px;
      	color: #000;
      	border: 1px solid #ddd;
    }

.front{
		-webkit-transform : translateZ(50px);
	}

.front:hover {
		background-color:#f00;
	}

.back{
		-webkit-transform : rotateY(180deg) translateZ(50px);
	}

.back:hover{
		background-color:#00f;
	}

.left{
		-webkit-transform : rotateY(-90deg) translateZ(50px);
	}

.left:hover{
		background-color:#ff0;
	}

.right{
		-webkit-transform : rotateY(90deg) translateZ(50px);
	}

.right:hover{
		background-color:#f0f;
	}

.top{
		-webkit-transform : rotateX(90deg) translateZ(50px);
	}

.top:hover{
		background-color:#0f0;
	}

.bottom{
		-webkit-transform : rotateX(-90deg) translateZ(50px) rotate(180deg);
	}

.bottom:hover{
		background-color:#0ff;
	}

#help{
		display: inline;
		border:solid 2px blue;
		color: #FFF;
		background-color: #999;
	}

HTML

<div id='help'> Use arrow keys to rotate , and click on cubes to move,
		Works only in chrome</div>
	<div id='universe'>
		<div id='space'>
			<div class='plane p1'>
				<div class='container c1'>
					<div class='cube b1'  id='animate'>
						<div  class='face front'></div>
						<div  class='face back'></div>
						<div  class='face left'></div>
						<div  class='face right'></div>
						<div  class='face top'></div>
						<div  class='face bottom'></div>
					</div>
					<div class='cube b2'  id='animate'>
						<div  class='face front'></div>
						<div  class='face back'></div>
						<div  class='face left'></div>
						<div  class='face right'></div>
						<div  class='face top'></div>
						<div  class='face bottom'></div>
					</div>
					<div class='cube b3'  id='animate'>
						<div  class='face front'></div>
						<div  class='face back'></div>
						<div  class='face left'></div>
						<div  class='face right'></div>
						<div  class='face top'></div>
						<div  class='face bottom'></div>
					</div>
					<div class='cube b4'  id='animate'>
						<div  class='face front'></div>
						<div  class='face back'></div>
						<div  class='face left'></div>
						<div  class='face right'></div>
						<div  class='face top'></div>
						<div  class='face bottom'></div>
					</div>
				</div>

Recommendation

Join Effecthub.com