cube.css

#experiment{
	-webkit-perspective:1000px;
	
	overflow:hidden;
}
#pagegroup{
	width:1000px;
	height:1000px;
	-webkit-transform-style:preserve-3d;
	transform-origin:50% 50% 200px;
	position:relative;
	margin:0 auto;
	animation:rotate-frame 5s linear infinite;
}
.page{
	width:400px;
	height:400px;
	padding:0px;
	color:white;
	background-color:black;
	font-weight:bold;
	font-size:400px;
	line-height:400px;
	text-align:center;
	position:absolute;
	
}
#before{
	left:300px;
	top:300px;
	transform:translateZ(400px);
	background-color:red;
	
}
#behind{
	left:300px;
	top:300px;
	transform:translateZ(0);
	background-color:green;
	
}
#left{
	left:-100px;
	top:300px;
	transform-origin:right;
	transform:rotateY(90deg);
	background-color:blue;
	
}
#right{
	right:-100px;
	top:300px;
	transform-origin:left;
	transform:rotateY(-90deg);
	background-color:yellow;
	
}
#top{
	left:300px;
	top:-100px;
	transform-origin:bottom;
	transform:rotateX(-90deg);
	background-color:gray;
	
}
#bottom{
	left:300px;
	bottom:-100px;
	transform-origin:top;
	transform:rotateX(90deg);
	transform:rotateX(90deg);
	background-color:pink;
	
}

@keyframes rotate-frame {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    10% {
        transform: rotateX(0deg) rotateY(180deg);
    }
    20% {
        transform: rotateX(-180deg) rotateY(180deg);
    }
    30% {
        transform: rotateX(-360deg) rotateY(180deg);
    }
    40% {
        transform: rotateX(-360deg) rotateY(360deg);
    }
    50% {
        transform: rotateX(-180deg) rotateY(360deg);
    }
    60% {
        transform: rotateX(90deg) rotateY(180deg);
    }
    70% {
        transform: rotateX(0) rotateY(180deg);
    }
    80% {
        transform: rotateX(90deg) rotateY(90deg);
    }
    90% {
        transform: rotateX(90deg) rotateY(0);
    }
    100% {
        transform: rotateX(0) rotateY(0);
    }
}