body {
    background: #000;
    font-family: Arial;
}
#page-table {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
#page-td {
    height: 100%;
    padding: 0;
    vertical-align: middle;
}
@-webkit-keyframes rotateCube {
	0% { 
		-webkit-transform: translateZ( -100px ) rotateX(   0deg ) rotateY(   0deg );
	}
	100% {
		-webkit-transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg );
	}
}
.container {
    -webkit-perspective: 600;
    margin-top: 100px;
}
#cube {
    width: 200px;
    height: 200px;
    margin: 20px auto;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 4s;
    -webkit-transform: translateZ(-100px) rotateX( -400deg ) rotateY( 67deg );
}
#cube.spinning {
    -webkit-animation: rotateCube 15s infinite linear;
}
#cube div {
    position: absolute;
    -webkit-backface-visibility: visible;
    overflow: hidden;
    width: 200px;
    height: 200px;
    background: white;
    border: 1px solid rgb(65, 65, 65);
}
#front {
    -webkit-transform: translateZ( 100px );
}
#back {
    -webkit-transform: translateZ( -100px );
}
#right {
    -webkit-transform: rotateY( -90deg ) translateZ( 100px );
}
#left {
    -webkit-transform: rotateY( 90deg ) translateZ( 100px );
}
#up {
    -webkit-transform: rotateX(90deg) translateZ( 100px );
}
#bottom {
    -webkit-transform: rotateX(-90deg) translateZ( 100px );
}


canvas {
  position: absolute;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
}