*{ box-sizing: border-box; }

.scene{

  width: 300px;
  height: 100px;
  margin: 60px auto;
  perspective: 800px;
  font-family: 'Open Sans';
  cursor: pointer;
}

.scene:hover .cube{

  transform: rotateX(90deg);
}

.cube{

  position: relative;
  width: 300px;
  height: 100px;
  margin: 30px;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: 0.4s all;
}

.front{
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	color: #FF0004;
	font-size: 20px;
	padding-top: 35px;
	letter-spacing: 4px;
	transform: rotateX(0deg) translate3d(0px,0px,50px);
	background-image: url(a1.jpg);
}
.front2{
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	color: #FF0004;
	font-size: 20px;
	padding-top: 35px;
	letter-spacing: 4px;
	transform: rotateX(0deg) translate3d(0px,0px,50px);
	background-image: url(a2.jpg);
}
.front3{
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	color: #FF0004;
	font-size: 20px;
	padding-top: 35px;
	letter-spacing: 4px;
	transform: rotateX(0deg) translate3d(0px,0px,50px);
	background-image: url(a3.jpg);
}

.bottom{
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	color: #fff;
	font-size: 20px;
	padding-top: 35px;
	letter-spacing: 4px;
	transform: rotateX(-90deg) translate3d(0px,0px,50px);
	background-color: #525252;
}

.shadow{

  position: absolute;
  background: #222;
  width: 300px;
  height: 100px;
  margin: 0 30px;
  opacity: 0.3;
  transform: rotateX(75deg) translate3d(0px,60px,0px);
  filter: blur(35px);
}