html
{
    display: table;
    margin: auto;
    height: 100%;
}
body
{
    display: table-cell;
    vertical-align: middle;
}
.mycube
{
    width: 400px;
    height: 400px;
    position: relative;
}
.cube
{
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform: rotateY(-42deg) rotateZ(20deg) rotateX(-20deg) translateZ(0px);
    transform: rotateY(-42deg) rotateZ(20deg) rotateX(-20deg) translateZ(0px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: cube 40s linear infinite;
    animation: cube 15s linear infinite;
}
.cube div
{
    width: 400px;
    height: 400px;
    position: absolute;
    box-shadow: 0 0 0 1px #000 ;
    border-radius: 100px;
}
.a
{
    -webkit-transform: rotateY(0) translateZ(200px);
    transform: rotateY(0) translateZ(200px);
    background-color: rgba(255, 0, 0 ,0.4);
	background-image: url("papera.jpg");
	background-size: 400px 400px;
}
.b
{
    -webkit-transform: rotateY(180deg) translateZ(200px);
    transform: rotateY(180deg) translateZ(200px);
    background-color: rgba(0, 255, 0 ,0.4);
	background-image: url("paperb.jpg");
	background-size: 400px 400px;
}
.c
{
    -webkit-transform: rotateY(90deg) translateZ(200px);
    transform: rotateY(90deg) translateZ(200px);
    background-color: rgba(0, 0, 255,0.4);
	background-image: url("paperc.jpg");
	background-size: 400px 400px;
}/* created by Hatem Dbais */
.d
{
    -webkit-transform: rotateY(-90deg) translateZ(200px);
    transform: rotateY(-90deg) translateZ(200px);
    background-color: rgba(255, 255, 0,0.4);
	background-image: url("paperd.jpg");
	background-size: 400px 400px;
}
.e
{
    -webkit-transform: rotateX(90deg) translateZ(200px);
    transform: rotateX(90deg) translateZ(200px);
    background-color: rgba(0, 255, 255,0.4);
	background-image: url("papere.jpg");
	background-size: 400px 400px;
}
.f
{
    -webkit-transform: rotateX(-90deg) translateZ(200px);
    transform: rotateX(-90deg) translateZ(200px);
    background-color: rgba(255, 0, 255,0.4);
	background-image: url("paperf.jpg");
	background-size: 400px 400px;
}/* created by Hatem Dbais */
@-webkit-keyframes cube
{
    100%{-webkit-transform: rotateY(678deg) rotateZ(740deg) rotateX(-20deg) translateZ(0px);
    transform: rotateY(678deg) rotateZ(740deg) rotateX(-20deg) translateZ(0px);}
}
@keyframes cube
{
    100%{-webkit-transform: rotateY(678deg) rotateZ(740deg) rotateX(-20deg) translateZ(0px);
    transform: rotateY(678deg) rotateZ(740deg) rotateX(-20deg) translateZ(0px);}
}
.cube .cube2
{
    height: 200px;
    width: 200px;
    box-shadow: 0 0 0 0;
    position: fixed;
    top: 60px;
    left: 60px;
    -webkit-transform: rotateX(-42deg) rotateZ(20deg) rotateY(-20deg) translateZ(0px);
    transform: rotateX(-42deg) rotateZ(20deg) rotateY(-20deg) translateZ(0px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: cube2 30s linear infinite;
    animation: cube2 30s linear infinite;
}
.cube2 div
{
    height: 200px;
    width: 200px;
    position: absolute;
}
.g
{
    -webkit-transform: rotateX(0) translateZ(100px);
    transform: rotateX(0) translateZ(100px);
    background-color: rgba(255, 0, 255,0.3);
}/* created by Hatem Dbais */
.h
{
    -webkit-transform: rotateX(180deg) translateZ(100px);
    transform: rotateX(180deg) translateZ(100px);
    background-color: rgba(0, 255, 255,0.3);
}
.i
{
    -webkit-transform: rotateX(90deg) translateZ(100px);
    transform: rotateX(90deg) translateZ(100px);
    background-color: rgba(255, 255, 0,0.3);
}
.j
{
    -webkit-transform: rotateX(-90deg) translateZ(100px);
    transform: rotateX(-90deg) translateZ(100px);
    background-color: rgba(0, 0, 255,0.3);
}
.k
{
    -webkit-transform: rotateY(90deg) translateZ(100px);
    transform: rotateY(90deg) translateZ(100px);
    background-color: rgba(0, 255, 0 ,0.3);
}/* created by Hatem Dbais */
.l
{
    -webkit-transform: rotateY(-90deg) translateZ(100px);
    transform: rotateY(-90deg) translateZ(100px);
    background-color: rgba(255, 0, 0 ,0.3);
}
@-webkit-keyframes cube2
{
    100%{-webkit-transform: rotateX(678deg) rotateZ(740deg) rotateY(-20deg) translateZ(0px);
    transform: rotateX(678deg) rotateZ(740deg) rotateY(-20deg) translateZ(0px);}
}
@keyframes cube2
{
    100%{-webkit-transform: rotateX(678deg) rotateZ(740deg) rotateY(-20deg) translateZ(0px);
    transform: rotateX(678deg) rotateZ(740deg) rotateY(-20deg) translateZ(0px);}
}
.cube2 .cube3
{
    height: 100px;
    width: 100px;
    box-shadow: 0 0 0 0;
    position: fixed;
    top: 30px;
    left: 30px;
    -webkit-transform: rotateY(-42deg) rotateZ(20deg) rotateX(-20deg) translateZ(0px);
    transform: rotateY(-42deg) rotateZ(20deg) rotateX(-20deg) translateZ(0px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: cube3 20s linear infinite;
    animation: cube3 20s linear infinite;
}
.cube3 div
{
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 5px;
}/* created by Hatem Dbais */
.m
{
    -webkit-transform: rotateY(0) translateZ(25px);
    transform: rotateY(0) translateZ(25px);
    background-color: rgba(255, 0, 0 ,1);
}
.n
{
    -webkit-transform: rotateY(180deg) translateZ(25px);
    transform: rotateY(180deg) translateZ(25px);
    background-color: rgba(0, 255, 0 ,1);
}
.o
{
    -webkit-transform: rotateY(90deg) translateZ(25px);
    transform: rotateY(90deg) translateZ(25px);
    background-color: rgba(0, 0, 255,1);
}
.p
{
    -webkit-transform: rotateY(-90deg) translateZ(25px);
    transform: rotateY(-90deg) translateZ(25px);
    background-color: rgba(255, 255, 0,1);
}
.q
{
    -webkit-transform: rotateX(90deg) translateZ(25px);
    transform: rotateX(90deg) translateZ(25px);
    background-color: rgba(0, 255, 255,1);
}/* created bt Hatem Dbais */
.r
{
    -webkit-transform: rotateX(-90deg) translateZ(25px);
    transform: rotateX(-90deg) translateZ(25px);
    background-color: rgba(255, 0, 255,1);
}
@-webkit-keyframes cube3
{
    100%{-webkit-transform: rotateY(678deg) rotateZ(740deg) rotateX(-20deg) translateZ(0px);
    transform: rotateY(678deg) rotateZ(740deg) rotateX(-20deg) translateZ(0px);}
}/* created by Hatem Dbais */
@keyframes cube3
{
    100%{-webkit-transform: rotateY(678deg) rotateZ(740deg) rotateX(-20deg) translateZ(0px);
    transform: rotateY(678deg) rotateZ(740deg) rotateX(-20deg) translateZ(0px);}
}