.body{
   background-image:url(../images/cube/img-ex1.jpg);
   background-attachment:fixed;
   background-repeat:no-repeat;
   background-position:center center;
   background-size:cover;
} 

.parent{
	position:relative;
	width:300px;
	height:200px;
	perspective:2800px;
	transform-origin:50% 50%;
	-webkit-perspective:2800px;
	-webkit-transform-origin:50% 50%;
	-moz-perspective:2800px;
	-moz-transform-origin:50% 50%;
	-o-perspective:2800px;
	-o-transform-origin:50% 50%;
	-ms-perspective:2800px;
	-ms-transform-origin:50% 50%;
}
.cube{
	position:relative;
	width:300px;
	height:300px;
	
	animation:AnimCube 5s linear infinite;
	transform-style: preserve-3d;
	-webkit-animation:AnimCube 5s linear infinite;
	-webkit-transform-style: preserve-3d;
	-moz-animation:AnimCube 5s linear infinite;
	-moz-transform-style: preserve-3d;
	-o-animation:AnimCube 5s linear infinite;
	-o-transform-style: preserve-3d;
	-ms-animation:AnimCube 5s linear infinite;
	-ms-transform-style: preserve-3d;
}

.face{
	width:300px;
	height:300px;
	position:absolute;
	line-height:300px;
	text-align:center;
	font-size:80px;
	opacity:0.7;
	border:solid 1px black;
}

.cote1{
	background-color:silver;
	z-index:10;
}
.cote2{
	background-image:url(../images/cube/img-ex1.jpg);
	transform:translateZ(-150px) translateX(150px) rotateY(90deg);
	-webkit-transform:translateZ(-150px) translateX(150px) rotateY(90deg);
	-moz-transform:translateZ(-150px) translateX(150px) rotateY(90deg);
	-o-transform:translateZ(-150px) translateX(150px) rotateY(90deg);
	-ms-transform:translateZ(-150px) translateX(150px) rotateY(90deg);
}
.cote3{
	background-image:url(../images/cube/img-ex9.jpg);
	transform:translateZ(-150px) translateX(-150px) rotateY(-90deg);
	-webkit-transform:translateZ(-150px) translateX(-150px) rotateY(-90deg);
	-moz-transform:translateZ(-150px) translateX(-150px) rotateY(-90deg);
	-o-transform:translateZ(-150px) translateX(-150px) rotateY(-90deg);
	-ms-transform:translateZ(-150px) translateX(-150px) rotateY(-90deg);
}
.cote4{
	background-image:url(../images/cube/img-ex.jpg);
	transform:translateZ(-150px) translateY(150px) rotateX(-90deg);
	-webkit-transform:translateZ(-150px) translateY(150px) rotateX(-90deg);
	-moz-transform:translateZ(-150px) translateY(150px) rotateX(90deg);
	-o-transform:translateZ(-150px) translateY(150px) rotateX(-90deg);
	-ms-transform:translateZ(-150px) translateY(150px) rotateX(-90deg);
}
.cote5{
	background-image:url(../images/cube/img-ex2.jpg);
	transform:translateZ(-150px) translateY(-150px) rotateX(90deg);
	-webkit-transform:translateZ(-150px) translateY(-150px) rotateX(90deg);
	-moz-transform:translateZ(-150px) translateY(-150px) rotateX(90deg);
	-o-transform:translateZ(-150px) translateY(-150px) rotateX(90deg);
	-ms-transform:translateZ(-150px) translateY(-150px) rotateX(90deg);
}
.cote6{
	background-image:url(../images/cube/img-ex2.jpg);
	transform:translateZ(-300px);
	-webkit-transform:translateZ(-300px);
	-moz-transform:translateZ(-300px);
	-o-transform:translateZ(-300px);
	-ms-transform:translateZ(-300px);
}

@keyframes AnimCube{
	from {}
	to{ transform-origin: 50% 50%; transform: rotateZ(360deg) rotateY(360deg) rotateX(360deg); }
}
@-webkit-keyframes AnimCube{
	from {}
	to{ -webkit-transform-origin: 50% 50%; -webkit-transform: rotateZ(360deg) rotateY(360deg) rotateX(360deg); }
}
@-moz-keyframes AnimCube{
	from {}
	to{ -moz-transform-origin: 50% 50%; -moz-transform: rotateZ(360deg) rotateY(360deg) rotateX(360deg); }
}
@-o-keyframes AnimCube{
	from {}
	to{ -o-transform-origin: 50% 50%; -o-transform: rotateZ(360deg) rotateY(360deg) rotateX(360deg); }
}
@-ms-keyframes AnimCube{
	from {}
	to{ -ms-transform-origin: 50% 50%; -ms-transform: rotateZ(360deg) rotateY(360deg) rotateX(360deg); }
}