EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

body {
	background-color: rgb(100, 164, 254);
}

/*---SCENE & CUBE BOUNCE---*/
.scene {
	-webkit-animation: bounce 2s ease-in-out infinite;
	-moz-animation: bounce 2s ease-in-out infinite;
  width: 320px;
	height: 320px;
	margin: auto;
	-webkit-perspective: 1200;
  -moz-perspective: 1200;
}

@-webkit-keyframes bounce {
	50% {-webkit-transform: translateY(80px);}
}
@-moz-keyframes bounce {
	50% {-moz-transform: translateY(80px);}
}

/*---CUBE & CUBE ROTATING---*/
.cube {
	-webkit-animation: turn 7s linear infinite;
  -moz-animation: turn 7s linear infinite;
	position: absolute;
	width: 320px;
	height: 320px;
	top: 80px;
	left: 0px;
	-webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
	-webkit-transform-origin: 160px 160px -160px;
  -moz-transform-origin: 160px 160px -160px;
  -ms-transform-origin: 160px 160px -160px;
  -o-transform-origin: 160px 160px -160px;
	transform-origin: 160px 160px -160px;
}

@-webkit-keyframes turn {
	100% {-webkit-transform: rotateX(0deg) rotateY(360deg);}
}
@-moz-keyframes turn {
	100% {-moz-transform: rotateX(0deg) rotateY(360deg);}
}

/*---PIXEL ART ON CUBE SIDES---*/
.face {
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: rgb(125, 125, 125);
	box-shadow: 
	/*1st ROW*/
	0px 0px 0px transparent,
	20px 0px 0px rgba(125, 125, 125, 1),
	40px 0px 0px rgba(125, 125, 125, 1),
	60px 0px 0px rgba(125, 125, 125, 1),
	80px 0px 0px rgba(125, 125, 125, 1),
	100px 0px 0px rgba(125, 125, 125, 1),
	120px 0px 0px transparent,
	140px 0px 0px rgba(125, 125, 125, 1),
	160px 0px 0px rgba(125, 125, 125, 1),
	180px 0px 0px rgba(125, 125, 125, 1),
	200px 0px 0px transparent,
	220px 0px 0px rgba(125, 125, 125, 1),
	240px 0px 0px transparent,
	260px 0px 0px rgba(94, 121, 125, 1),
	280px 0px 0px rgba(125, 125, 125, 1),
	300px 0px 0px rgba(94, 121, 125, 1),
	/*2nd ROW*/
	0px 20px 0px rgba(125, 125, 125, 1),
	20px 20px 0px transparent,
	40px 20px 0px transparent,
	60px 20px 0px transparent,
	80px 20px 0px rgba(125, 125, 125, 1),
	100px 20px 0px transparent,
	120px 20px 0px transparent,
	140px 20px 0px transparent,
	160px 20px 0px rgba(94, 121, 125, 1),
	180px 20px 0px transparent,
	200px 20px 0px transparent,
	220px 20px 0px transparent,
	240px 20px 0px rgba(94, 121, 125, 1),
	260px 20px 0px transparent,
	280px 20px 0px transparent,
	300px 20px 0px rgba(88, 105, 108, 1),
	/*3rd ROW*/
	0px 40px 0px rgba(125, 125, 125, 1),
	20px 40px 0px transparent,
	40px 40px 0px transparent,
	60px 40px 0px rgba(125, 125, 125, 1),
	80px 40px 0px transparent,
	100px 40px 0px transparent,
	120px 40px 0px transparent,
	140px 40px 0px rgba(94, 121, 125, 1),
	160px 40px 0px transparent,
	180px 40px 0px transparent,
	200px 40px 0px transparent,
	220px 40px 0px transparent,
	240px 40px 0px transparent,
	260px 40px 0px transparent,
	280px 40px 0px transparent,
	300px 40px 0px rgba(88, 105, 108, 1),
	/*4th ROW*/
	0px 60px 0px transparent,
	20px 60px 0px transparent,
	40px 60px 0px rgba(125, 125, 125, 1),
	60px 60px 0px transparent,
	80px 60px 0px transparent,
	100px 60px 0px transparent,
	120px 60px 0px transparent,
	140px 60px 0px transparent,
	160px 60px 0px transparent,
	180px 60px 0px transparent,
	200px 60px 0px transparent,
	220px 60px 0px transparent,
	240px 60px 0px transparent,
	260px 60px 0px transparent,
	280px 60px 0px transparent,
	300px 60px 0px rgba(88, 105, 108, 1),
	/*5th ROW*/
	0px 80px 0px rgba(125, 125, 125, 1),
	20px 80px 0px transparent,
	40px 80px 0px transparent,
	60px 80px 0px transparent,
	80px 80px 0px transparent,
	100px 80px 0px transparent,
	120px 80px 0px transparent,
	140px 80px 0px transparent,
	160px 80px 0px transparent,
	180px 80px 0px transparent,
	200px 80px 0px transparent,
	220px 80px 0px transparent,
	240px 80px 0px transparent,
	260px 80px 0px transparent,
	280px 80px 0px transparent,
	300px 80px 0px rgba(88, 105, 108, 1),
	/*6th ROW*/
	0px 100px 0px rgba(125, 125, 125, 1),
	20px 100px 0px transparent,
	40px 100px 0px transparent,
	60px 100px 0px transparent,
	80px 100px 0px transparent,
	100px 100px 0px transparent,
	120px 100px 0px transparent,
	140px 100px 0px transparent,
	160px 100px 0px transparent,
	180px 100px 0px transparent,
	200px 100px 0px transparent,
	220px 100px 0px transparent,
	240px 100px 0px transparent,
	260px 100px 0px transparent,
	280px 100px 0px transparent,
	300px 100px 0px rgba(88, 105, 108, 1),
	/*7th ROW*/
	0px 120px 0px rgba(125, 125, 125, 1),
	20px 120px 0px transparent,
	40px 120px 0px rgba(94, 121, 125, 1),
	60px 120px 0px transparent,
	80px 120px 0px transparent,
	100px 120px 0px transparent,
	120px 120px 0px transparent,
	140px 120px 0px rgba(94, 121, 125, 1),
	160px 120px 0px transparent,
	180px 120px 0px transparent,
	200px 120px 0px transparent,
	220px 120px 0px rgba(94, 121, 125, 1),
	240px 120px 0px transparent,
	260px 120px 0px transparent,
	280px 120px 0px transparent,
	300px 120px 0px transparent,
	/*8th ROW*/
	0px 140px 0px rgba(125, 125, 125, 1),
	20px 140px 0px rgba(94, 121, 125, 1),
	40px 140px 0px transparent,
	60px 140px 0px transparent,
	80px 140px 0px transparent,
	100px 140px 0px transparent,
	120px 140px 0px rgba(94, 121, 125, 1),
	140px 140px 0px transparent,
	160px 140px 0px transparent,
	180px 140px 0px transparent,
	200px 140px 0px rgba(125, 125, 125, 1),
	220px 140px 0px transparent,
	240px 140px 0px transparent,
	260px 140px 0px transparent,
	280px 140px 0px transparent,
	300px 140px 0px transparent,
	/*9th ROW*/
	0px 160px 0px rgba(125, 125, 125, 1),
	20px 160px 0px transparent,
	40px 160px 0px transparent,
	60px 160px 0px transparent,
	80px 160px 0px transparent,
	100px 160px 0px rgba(125, 125, 125, 1),
	120px 160px 0px transparent,
	140px 160px 0px transparent,
	160px 160px 0px transparent,
	180px 160px 0px rgba(125, 125, 125, 1),
	200px 160px 0px transparent,
	220px 160px 0px transparent,
	240px 160px 0px transparent,
	260px 160px 0px transparent,
	280px 160px 0px transparent,
	300px 160px 0px rgba(88, 105, 108, 1),
	/*10th ROW*/
	0px 180px 0px rgba(125, 125, 125, 1),
	20px 180px 0px transparent,
	40px 180px 0px transparent,
	60px 180px 0px transparent,
	80px 180px 0px rgba(125, 125, 125, 1),
	100px 180px 0px transparent,
	120px 180px 0px transparent,
	140px 180px 0px transparent,
	160px 180px 0px transparent,
	180px 180px 0px transparent,
	200px 180px 0px transparent,
	220px 180px 0px transparent,
	240px 180px 0px transparent,
	260px 180px 0px transparent,
	280px 180px 0px transparent,
	300px 180px 0px rgba(88, 105, 108, 1),
	/*11th ROW*/
	0px 200px 0px rgba(125, 125, 125, 1),
	20px 200px 0px transparent,
	40px 200px 0px transparent,
	60px 200px 0px transparent,
	80px 200px 0px transparent,
	100px 200px 0px transparent,
	120px 200px 0px transparent,
	140px 200px 0px transparent,
	160px 200px 0px transparent,
	180px 200px 0px transparent,
	200px 200px 0px transparent,
	220px 200px 0px transparent,
	240px 200px 0px transparent,
	260px 200px 0px rgba(94, 121, 125, 1),
	280px 200px 0px transparent,
	300px 200px 0px transparent,
	/*12th ROW*/
	0px 220px 0px rgba(125, 125, 125, 1),
	20px 220px 0px transparent,
	40px 220px 0px transparent,
	60px 220px 0px transparent,
	80px 220px 0px transparent,
	100px 220px 0px transparent,
	120px 220px 0px transparent,
	140px 220px 0px transparent,
	160px 220px 0px transparent,
	180px 220px 0px transparent,
	200px 220px 0px transparent,
	220px 220px 0px transparent,
	240px 220px 0px rgba(125, 125, 125, 1),
	260px 220px 0px transparent,
	280px 220px 0px transparent,
	300px 220px 0px rgba(88, 105, 108, 1),
	/*13th ROW*/
	0px 240px 0px rgba(125, 125, 125, 1),
	20px 240px 0px transparent,
	40px 240px 0px transparent,
	60px 240px 0px transparent,
	80px 240px 0px transparent,
	100px 240px 0px rgba(94, 121, 125, 1),
	120px 240px 0px transparent,
	140px 240px 0px transparent,
	160px 240px 0px transparent,
	180px 240px 0px transparent,
	200px 240px 0px transparent,
	220px 240px 0px rgba(125, 125, 125, 1),
	240px 240px 0px transparent,
	260px 240px 0px transparent,
	280px 240px 0px transparent,
	300px 240px 0px rgba(88, 105, 108, 1),
	/*14th ROW*/
	0px 260px 0px rgba(125, 125, 125, 1),
	20px 260px 0px transparent,
	40px 260px 0px transparent,
	60px 260px 0px transparent,
	80px 260px 0px rgba(94, 121, 125, 1),
	100px 260px 0px transparent,
	120px 260px 0px transparent,
	140px 260px 0px transparent,
	160px 260px 0px transparent,
	180px 260px 0px transparent,
	200px 260px 0px rgba(125, 125, 125, 1),
	220px 260px 0px transparent,
	240px 260px 0px transparent,
	260px 260px 0px transparent,
	280px 260px 0px transparent,
	300px 260px 0px rgba(88, 105, 108, 1),
	/*15th ROW*/
	0px 280px 0px rgba(125, 125, 125, 1),
	20px 280px 0px transparent,
	40px 280px 0px transparent,
	60px 280px 0px rgba(94, 121, 125, 1),
	80px 280px 0px transparent,
	100px 280px 0px transparent,
	120px 280px 0px transparent,
	140px 280px 0px transparent,
	160px 280px 0px transparent,
	180px 280px 0px transparent,
	200px 280px 0px transparent,
	220px 280px 0px transparent,
	240px 280px 0px transparent,
	260px 280px 0px transparent,
	280px 280px 0px transparent,
	300px 280px 0px rgba(88, 105, 108, 1),
	/*16th ROW*/
	0px 300px 0px rgba(94, 121, 125, 1),
	20px 300px 0px rgba(88, 105, 108, 1),
	40px 300px 0px transparent,
	60px 300px 0px rgba(88, 105, 108, 1),
	80px 300px 0px rgba(88, 105, 108, 1),
	100px 300px 0px transparent,
	120px 300px 0px rgba(88, 105, 108, 1),
	140px 300px 0px rgba(88, 105, 108, 1),
	160px 300px 0px rgba(88, 105, 108, 1),
	180px 300px 0px transparent,
	200px 300px 0px transparent,
	220px 300px 0px rgba(88, 105, 108, 1),
	240px 300px 0px rgba(88, 105, 108, 1),
	260px 300px 0px rgba(88, 105, 108, 1),
	280px 300px 0px rgba(94, 121, 125, 1),
	300px 300px 0px rgba(94, 121, 125, 1);
}

/*---CUBE FACES---*/
.face.front {
	-webkit-transform: translateZ(10px);
  -moz-transform: translateZ(10px);
}

.face.left {
	-webkit-transform: translateX(-10px) translateZ(-300px) rotateY(-90deg);
  -moz-transform: translateX(-10px) translateZ(-300px) rotateY(-90deg);
}

.face.right {
	-webkit-transform: translateX(310px) rotateY(90deg);
  -moz-transform: translateX(310px) rotateY(90deg);
}

.face.rear {
	-webkit-transform: translateZ(-310px) translateX(300px) rotateY(180deg);
  -moz-transform: translateZ(-310px) translateX(300px) rotateY(180deg);
}

.face.top {
	-webkit-transform: translateY(-10px) translateZ(-300px) rotateX(90deg);
  -moz-transform: translateY(-10px) translateZ(-300px) rotateX(90deg);
}

.face.bottom {
	-webkit-transform: translateY(310px) rotateX(-90deg);
  -moz-transform: translateY(310px) rotateX(-90deg);
}

/*---SHADOW & SHADOW ANIMATION---*/
.shadow {
	-webkit-animation: shadow 2s ease-in-out infinite;
  -moz-animation: shadow 2s ease-in-out infinite;
	width: 260px;
	height: 60px;
	border-radius: 130px / 30px;
	background-color: rgba(0, 0, 0, .5);
	margin: auto;
	margin-top: 180px;
}

@-webkit-keyframes shadow {
	50% {width: 340px;
		 height: 100px;
		 border-radius: 170px / 50px;}
}
@-moz-keyframes shadow {
	50% {width: 340px;
		 height: 100px;
		 border-radius: 170px / 50px;}
}

HTML

Recommendation

Join Effecthub.com