3D Box Using Pure CSS3

HTML

<div class="page-center">

<div class="box-outer">

<div class="box">

<div class="front"><img src="http://dice-academy.com/wp-content/uploads/2017/07/dice-new.jpg"></div>
<div class="back"><img src="http://dice-academy.com/wp-content/uploads/2017/07/2.png"></div>
<div class="left"><img src="http://dice-academy.com/wp-content/uploads/2017/07/3.jpg"></div>
<div class="right"><img src="http://dice-academy.com/wp-content/uploads/2017/07/4.png"></div>
<div class="top"><img src="http://dice-academy.com/wp-content/uploads/2017/07/5.jpg"></div>
<div class="bottom"><img src="http://dice-academy.com/wp-content/uploads/2017/07/1.png"></div>

</div>
</div>

</div>

CSS

.page-center{
	text-align:center;
	margin:160px auto;
	max-width:900px;
}

.box-outer{
	perspective: 1200px;
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	text-align: center;
}

.box{
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	width: 300px;
	height: 300px;
	margin: 0 auto;
	position: relative;
	
	-webkit-animation: run 8s infinite ease-in-out alternate;
    -moz-animation: run 8s infinite ease-in-out alternate;
    -o-animation: run 8s infinite ease-in-out alternate;
    animation: run 8s infinite ease-in-out alternate;
}

  @-webkit-keyframes run {
        0% { -webkit-transform: translateZ( -1200px ) rotateX(   0deg ) rotateY(   0deg ); }
      100% { -webkit-transform: translateZ( 1200px ) rotateX( 360deg ) rotateY( 360deg ); }
    }

    @-moz-keyframes run {
        0% { -moz-transform: translateZ( -1200px ) rotateX(   0deg ) rotateY(   0deg ); }
      100% { -moz-transform: translateZ( 1200px ) rotateX( 360deg ) rotateY( 360deg ); }
    }

    @keyframes run {
        0% { transform: translateZ( -1200px ) rotateX(   0deg ) rotateY(   0deg ); }
      100% { transform: translateZ( 1200px ) rotateX( 360deg ) rotateY( 360deg ); }
    }

.box div {
	line-height: 300px;
    position: absolute;
    height: 100%;
    width: 100%;
	box-shadow:0 0 0 12px #2BAACC ;
	border:34px solid #ccc;
}

.box div  img{
	opacity:0.9;
}

.box div.back {
	transform: translateZ(-300px);
	-webkit-transform: translateZ(-300px);
	-moz-transform: translateZ(-300px);
}

.left {
    transform: rotateY(-90deg) translateX(-147px) translateZ(149px);
	-webkit-transform: rotateY(-90deg) translateX(-147px) translateZ(149px);
	-moz-transform: rotateY(-90deg) translateX(-147px) translateZ(149px);
}

.right {
    transform: rotateY(90deg) translateX(146px) translateZ(150px);
	-webkit-transform: rotateY(90deg) translateX(146px) translateZ(150px);
	-moz-transform: rotateY(90deg) translateX(146px) translateZ(150px);
}

.top {
    transform: rotateX(90deg) translateY(-149px) translateZ(150px);
	-webkit-transform: rotateX(90deg) translateY(-149px) translateZ(150px);
	-moz-transform: rotateX(90deg) translateY(-149px) translateZ(150px);
}

.bottom {
    transform: rotateX(-90deg) translateY(149px) translateZ(150px);
	-webkit-transform: rotateX(-90deg) translateY(149px) translateZ(150px);
	-moz-transform: rotateX(-90deg) translateY(149px) translateZ(150px);
}