body {
  background-color: rgba(192,168,121,0);
}

.scene3d {
  perspective: 1000px;
  width: 50%;
  height: 50%;
  margin-top: 33%;
  margin-left: auto;
  margin-right: auto;
}

@keyframes rotate3d {
  from {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -ms-transform: perspective(1000px);
  }
  to   {
    transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
    -ms-transform: perspective(1000px);
  }
}

@-ms-keyframes msrotate3d1 {
  from {
    -ms-transform: perspective(1000px) translateZ(150px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  to   {
    -ms-transform: perspective(1000px) translateZ(150px) rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
  }
}
@-ms-keyframes msrotate3d2 {
  from {
    -ms-transform: perspective(1000px) translateZ(-150px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  to   {
    -ms-transform: perspective(1000px) translateZ(-150px) rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
  }
}
@-ms-keyframes msrotate3d3 {
  from {
    -ms-transform: perspective(1000px) translateX(150px) rotateY(90deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  to   {
    -ms-transform: perspective(1000px) translateX(150px) rotateY(90deg) rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
  }
}
@-ms-keyframes msrotate3d4 {
  from {
    -ms-transform: perspective(1000px) translateX(-150px) rotateY(-90deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  to   {
    -ms-transform: perspective(1000px) translateX(-150px) rotateY(-90deg) rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
  }
}
@-ms-keyframes msrotate3d5 {
  from {
    -ms-transform: perspective(1000px) translateY(150px) rotateX(90deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  to   {
    -ms-transform: perspective(1000px) translateY(150px) rotateX(90deg) rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
  }
}
@-ms-keyframes msrotate3d6 {
  from {
    -ms-transform: perspective(1000px) translateY(-150px) rotateX(-90deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  to   {
    -ms-transform: perspective(1000px) translateY(-150px) rotateX(-90deg) rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
  }
}

.object3d {
  position: absolute;
	width: 100%;
	height: 100%;
	/* transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); */
  transform-style: preserve-3d;
  /* -ms-transform-style: flat; */
  animation: rotate3d linear infinite 45s;
  -ms-animation: msrotate3d linear infinite 45s;
}

.face3d {
  position: absolute;
  left: 165px;
  top: 15px;
  background-color: transparent;
  transition: 0.5s linear;
  -ms-animation: msrotate3d linear infinite 45s;
}

.face3d.im1 {
  top: 30px;
  transform: translateZ(150px);
  -ms-transform: perspective(1000px);
  -ms-animation: msrotate3d1 linear infinite 45s;
}
.face3d.im2 {
  top: 30px;
  transform: translateZ(-150px);
  -ms-transform: perspective(1000px);
  -ms-animation: msrotate3d2 linear infinite 45s;
}
.face3d.im3 {
  top: 30px;
  transform: translateX(150px) rotateY(90deg);
  -ms-transform: perspective(1000px);
  -ms-animation: msrotate3d3 linear infinite 45s;
}
.face3d.im4 {
  top: 30px;
  transform: translateX(-150px) rotateY(-90deg);
  -ms-transform: perspective(1000px);
  -ms-animation: msrotate3d4 linear infinite 45s;
}
.face3d.im5 {
  top: 30px;
  transform: translateY(150px) rotateX(90deg);
  -ms-transform: perspective(1000px);
  -ms-animation: msrotate3d5 linear infinite 45s;
}
.face3d.im6 {
  top: 30px;
  transform: translateY(-150px) rotateX(-90deg);
  -ms-transform: perspective(1000px);
  -ms-animation: msrotate3d6 linear infinite 45s;
}

:hover > .face3d.im1 { top: 30px; transform: translateZ(250px); }
:hover > .face3d.im2 { top: 30px; transform: translateZ(-250px); }
:hover > .face3d.im3 { top: 30px; transform: translateX(250px) rotateY(90deg);}
:hover > .face3d.im4 { top: 30px; transform: translateX(-250px) rotateY(-90deg);}
:hover > .face3d.im5 { top: 30px; transform: translateY(250px) rotateX(90deg);}
:hover > .face3d.im6 { top: 30px; transform: translateY(-250px) rotateX(-90deg);}