* {
  transition: 2s;
  text-align:center;
/*   margin:0; */
/*   padding:0; */
}

body {
  height:100vh;
  background: url("https://www.edhat.com/sites/default/files/news_image/pexels-photo-998641.jpeg");
}

input {
  opacity:0;;
}

.scene {
  margin:100px auto;
  width:200px;
  height:200px;
  perspective: 800px;
}
.cube {
  width: 100%;
  height: 100%;
  position:relative;
  transform-style: preserve-3d;
  transition: 2s;
}
.rotating {
  animation: spinner 10s infinite linear;
}

.cube-face {
  width:inherit;
  height:inherit;
  position:absolute;
  transition: 2s;
  box-shadow: 0px 0px 130px #59f;
  background-repeat: no-repeat;
  background-color:#111;
  opacity:0.7;
  line-height: 200px;
  color:#fff;
  text-align:center;
  font-family:sans-serif;
  font-size:0px;
  font-weight:800;
}

.inner-faces {
  background: url("https://cdn.dribbble.com/users/32512/screenshots/3025506/artificial_intelligence_product_rokid.gif");
  background-position: center;
  background-size:cover;
  opacity:.6;
  box-shadow: 0px 0px 0px #fff;
}

.inner-face {
  transform: translate3d(0, 0, 0px);
}
.inner-face2 {
  transform: rotateY(90deg) translate3d(0, 0, 0px);
}
.inner-face3 {
  transform: rotateX(90deg) translate3d(0, 0, 0px);
}

.front {
  transform: translate3d(0, 0, 100px);
  transition:2s;
}
.back {
  transform: rotateY(180deg) translate3d(0, 0, 100px);
}
.left {
  transform: rotateY(-90deg) translate3d(0, 0, 100px);
}
.right {
  transform: rotateY(90deg) translate3d(0, 0, 100px);
}
.top {
  transform: rotateX(90deg) translate3d(0, 0, 100px);
}
.bottom {
  transform: rotateX(-90deg) translate3d(0, 0, 100px);
}

.button-div {
  width:100%;
  text-align:center;
}
.btn {
  background:#000;
  border:2px solid royalblue;
  color: royalblue;
  font-weight:800;
  text-transform: uppercase;
  padding: 10px 30px;
  margin-top:40px;
}

/* Apply rotation depending on checked input */
.radio-back:checked ~ .scene .cube {
  transform: rotateY(180deg);
}
.radio-top:checked ~ .scene .cube {
  transform: rotateX(-90deg);
}
.radio-bottom:checked ~ .scene .cube {
  transform: rotateX(90deg);
}
.radio-left:checked ~ .scene .cube {
  transform: rotateY(90deg);
}
.radio-right:checked ~ .scene .cube {
  transform: rotateY(-90deg);
}

@keyframes spinner {
  from {transform: rotateY(0deg) rotateX(0deg);}
  to {transform: rotateY(359deg) rotateX(359deg);}
}