* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
	background: #29303b;
	display: flex;
	align-items: center;
	justify-content: center;
}


  #wrapD3Cube {
    width: 250px;
    height: 213px;
    margin: 20px auto;
	margin-top: 70%;
}
#D3Cube {
    width: 112px;
    height: 112px;
    top: 50px;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    margin: auto;
    position: relative;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
	animation: rotate 5s infinite ease-in-out;
}
#D3Cube > div {
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    width: 112px;
    height: 112px;
    float: left;
    overflow: hidden;
    opacity: 0.85;
}
#side1 {
    transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #fab005;
}
#side2 {
    transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #4c6ef5;
}
#side3 {
    transform: translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: translateX(0px) translateY(0px) translateZ(56px);
    background-color: #fa5252;
}
#side4 {
    transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #12b886;
}
#side5 {
    transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #f76707;
}
#side6 {
    transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #7950f2;
}

@keyframes rotate {
	20% {  transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg) translateX(0) translateY(0) translateZ(0); }
    35% {  transform: rotateX(-22deg) rotateY(-138deg) rotateZ(0deg) translateX(0) translateY(0) translateZ(0);  } /* rotateZ(90deg); */
    60% {  transform: rotateX(-22deg) rotateY(-228deg) rotateZ(0deg) translateX(0) translateY(0) translateZ(0); } /* rotateZ(90deg) */
    80% {  transform: rotateX(-22deg) rotateY(-308deg) rotateZ(0deg) translateX(0) translateY(0) translateZ(0); }
	100%{transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg) translateX(0) translateY(0) translateZ(0);}
}


#wrapD3Cube2 {
    width: 250px;
    height: 213px;
    margin: 20px auto;
	margin-top: 70%;
}
#D3Cube2 {
    width: 112px;
    height: 112px;
    top: 50px;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-38deg) rotateZ(90deg);
    -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(90deg);
    -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(90deg);
    margin: auto;
    position: relative;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
	animation: rotatey 5s infinite ease-in-out;
	/* animation: cubeRotation 5s infinite; */
}

#D3Cube2 > div {
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    width: 112px;
    height: 112px;
    float: left;
    overflow: hidden;
    opacity: 0.85;
}

@keyframes rotatey {
	20% {  transform: rotateX(-22deg) rotateY(-38deg) rotateZ(90deg) translateX(0) translateY(0) translateZ(0); }
    40% {  transform: rotateX(-22deg) rotateY(-38deg) rotateZ(180deg) translateX(0) translateY(0) translateZ(0);  }
    60% {  transform: rotateX(-22deg) rotateY(-38deg) rotateZ(270deg) translateX(0) translateY(0) translateZ(0); }
    80% {  transform: rotateX(-22deg) rotateY(-38deg) rotateZ(360deg) translateX(0) translateY(0) translateZ(0); }
	100%{transform: rotateX(-22deg) rotateY(-38deg) rotateZ(450deg) translateX(0) translateY(0) translateZ(0);}
}

.absolute{
	position: absolute;
}

/*-------------------------*/
.scene{
	width: 250px;
	height: 213px;
	margin:20px auto;
	/* perspective: 900px; */
}

.rotateX .cube{
	width: 112px;
	height: 112px;
	top: 50px;
	transform-style: preserve-3d;
	transform: rotateX(-22deg) rotateY(-38deg) rotateZ(90deg) ;
	margin: auto;
	position: relative;
	animation: rotatey 5s infinite ease-in-out;
}

.rotateY .cube{
	width: 112px;
	height: 112px;
	top: 50px;
	transform-style: preserve-3d;
	transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
	margin: auto;
	position: relative;
	animation: rotate 5s infinite ease-in-out;
}

.cube div{
	position: absolute;
	width: 112px;
	height: 112px;
	float: left;
	overflow: hidden;
	opacity: 0.85;
	display: grid;
	grid-template-areas: '1 2 3';
}

span{
	border: 2px solid white;
}


.front{
	transform: translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: translateX(0px) translateY(0px) translateZ(56px);
    background-color: #fa5252;	
}


.back{
	transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #f76707;
}

.right{
	transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #12b886;
}

.left{
	transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #4c6ef5;
}

.top{
	transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #fab005;
}

.bottom{
	transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #7950f2;
}
/* .scene{
	height: 200px;
	width: 200px;
	margin: 100px;
	perspective: 900px;	
}

.cube > div{
	
	display: grid;
	grid-template-areas: '1 2 3';
	position: absolute;
	width: 112px;
    height: 112px;
	opacity: 0.85;
}

.cube{
	transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-38deg) rotateZ(90deg);
    -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(90deg);
    -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(90deg);
    margin: auto;
    position: relative;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
	width: 112px;
    height: 112px;
    top: 50px;
}

span {	
	border: 2px solid white;
}

.front{
	transform: translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: translateX(0px) translateY(0px) translateZ(56px);
    background-color: #fa5252;	
}


.back{
	transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #f76707;
}

.right{
	transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #12b886;
}

.left{
	transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #4c6ef5;
}

.top{
	transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #fab005;
}

.bottom{
	transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #7950f2;
} */

.rotateX .cube .front{
	transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #fa5252;	
}


.rotateX .cube .back{
	transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #f76707;
}

.rotateX .cube .right{

	transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #12b886;
}

.rotateX .cube .left{
	transform: translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: translateX(0px) translateY(0px) translateZ(56px);
    background-color: #4c6ef5;
}

.rotateX .cube .top{		

	transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #fab005;
}

.rotateX .cube .bottom{
	transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #7950f2;
}

/* responsive */
@media screen and (max-width: 500px) {
    body{
        display: grid;
        grid-template-rows: 1fr 1fr;
        height: 50vh;        
    }
}