Deadmau5 Cube

3D Cube animation using CSS3, SVG and bit of javascrtipt

by marakoss

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="scene">
<div class="box">
<div class="box-face box-face-top">
<div class="box-part"><svg width="180" height="180">
		<line class="top" x1="0" y1="0" x2="570" y2="0"/>
		<line class="left" x1="0" y1="180" x2="0" y2="-390"/>
		<line class="bottom" x1="180" y1="180" x2="-390" y2="180"/>
		<line class="right" x1="180" y1="0" x2="180" y2="570"/>
	</svg></div>
<div class="box-part"><svg width="180" height="180">
		<line class="top" x1="0" y1="0" x2="570" y2="0"/>
		<line class="left" x1="0" y1="180" x2="0" y2="-390"/>
		<line class="bottom" x1="180" y1="180" x2="-390" y2="180"/>
		<line class="right" x1="180" y1="0" x2="180" y2="570"/>
	</svg></div>
<div class="box-part"><svg width="180" height="180">
		<line class="top" x1="0" y1="0" x2="570" y2="0"/>
		<line class="left" x1="0" y1="180" x2="0" y2="-390"/>
		<line class="bottom" x1="180" y1="180" x2="-390" y2="180"/>
		<line class="right" x1="180" y1="0" x2="180" y2="570"/>
	</svg></div>
<div class="box-part"><svg width="180" height="180">
		<line class="top" x1="0" y1="0" x2="570" y2="0"/>
		<line class="left" x1="0" y1="180" x2="0" y2="-390"/>
		<line class="bottom" x1="180" y1="180" x2="-390" y2="180"/>
		<line class="right" x1="180" y1="0" x2="180" y2="570"/>
	</svg></div>
<div class="box-part"><svg width="180" height="180">
		<line class="top" x1="0" y1="0" x2="570" y2="0"/>
		<line class="left" x1="0" y1="180" x2="0" y2="-390"/>
		<line class="bottom" x1="180" y1="180" x2="-390" y2="180"/>
		<line class="right" x1="180" y1="0" x2="180" y2="570"/>
	</svg></div>
<div class="box-part"><svg width="180" height="180">
		<line class="top" x1="0" y1="0" x2="570" y2="0"/>
		<line class="left" x1="0" y1="180" x2="0" y2="-390"/>
		<line class="bottom" x1="180" y1="180" x2="-390" y2="180"/>
		<line class="right" x1="180" y1="0" x2="180" y2="570"/>
	</svg></div>
<div class="box-part"><svg width="180" height="180">
		<line...

CSS

* {
	box-sizing: border-box;
}

.scene {
	background: #000;
	perspective: 1200px;
	width: 600px;
}

.box{
	width: 600px;
	height: 600px;
	position: relative;
	transform-style: preserve-3d;
	transform: translateX(-200px) translateZ(-1200px) rotateY(-56.5deg) rotateX(-30deg) rotateZ(37deg);
	transform-origin: 50% 50%;
}

.box-face{
	width: 600px;
	height: 600px;
	position: absolute;
	left: 0;
	top: 0;
}

.box-face-top{
	transform: rotateX(-90deg) translateY(300px) translateZ(-300px);
	transform-origin: 50% 50%;
	//background:pink;
}

.box-face-left{
	//background:green;
}

.box-face-right{
	transform: rotateY(-90deg) translateX(-300px) translateZ(-300px);
	transform-origin: 50% 50%;
	//background:blue;
}

.box-part {
	width: 200px;
	height: 200px;
	outline: 1px solid rgba(255,0,0,0.2);
	float: left;
	position: relative;

}
@-webkit-keyframes moveInCircle {
	0% {-webkit-transform: translateY(-8px) translateX(-8px);}
	25% {-webkit-transform: translateY(-8px) translateX(8px);}
	50% {-webkit-transform: translateY(8px) translateX(8px);}
	75% {-webkit-transform: translateY(8px) translateX(-8px);}
	100% {-webkit-transform: translateY(-8px) translateX(-8px);}
} 

@keyframes moveInCircle {
	0% {transform: translateY(-8px) translateX(-8px);}
	25% {transform: translateY(-8px) translateX(8px);}
	50% {transform: translateY(8px) translateX(8px);}
	75% {transform: translateY(8px) translateX(-8px);}
	100% {transform: translateY(-8px) translateX(-8px);}
}

@-webkit-keyframes moveTopBorder {
	0% {-webkit-transform: translateX(0px);}
	100% {-webkit-transform: translateX(-400px);}
} 

@keyframes moveTopBorder {
	0% {transform: translateX(0px);}
	100% {transform: translateX(-400px);}
} 

@-webkit-keyframes moveLeftBorder {
	0% {-webkit-transform: translateY(0px);}
	100% {-webkit-transform: translateY(400px);}
} 

@keyframes moveLeftBorder {
	0% {transform: translateY(0px);}
	100% {transform: translateY(400px);}
} 

@-webkit-keyframes moveRightBorder {
	0% {-webkit-transform:...

JavaScript

$(document).ready(function(){
	var nodes = $('.box-part');
	var timeout = null;
	var highlight = function(node){
		node.toggleClass('highlight');
		timeout = setTimeout(function(){highlight(getRandomNode())},200);
	}
	var getRandomNode = function(){
	var node= nodes.eq(Math.floor((Math.random() * nodes.length)));
return node;
	}
	highlight(nodes.eq(0));
});