.scene{margin:auto;width:50%;-webkit-perspective:400px;perspective:400px}.cube{width:200px;height:200px;position:relative;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(-100px);transform:translateZ(-100px)}.cube.is-spinning{-webkit-animation:spinCube 8s ease-in-out infinite;animation:spinCube 8s ease-in-out infinite;-webkit-animation-duration:8s;animation-duration:8s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:normal;animation-direction:normal;-webkit-animation-fill-mode:none;animation-fill-mode:none;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-name:spinCube;animation-name:spinCube}.cube__face{position:absolute;width:200px;height:200px;border:2px solid #fff;color:#fff}.cube__face--back,.cube__face--bottom,.cube__face--front,.cube__face--left,.cube__face--right,.cube__face--top{background:rgba(52,234,179,.7)}.cube__face--front{-webkit-transform:rotateY(0deg) translateZ(100px);transform:rotateY(0deg) translateZ(100px)}.cube__face--right{-webkit-transform:rotateY(90deg) translateZ(100px);transform:rotateY(90deg) translateZ(100px)}.cube__face--back{-webkit-transform:rotateY(180deg) translateZ(100px);transform:rotateY(180deg) translateZ(100px)}.cube__face--left{-webkit-transform:rotateY(-90deg) translateZ(100px);transform:rotateY(-90deg) translateZ(100px)}.cube__face--top{-webkit-transform:rotateX(90deg) translateZ(100px);transform:rotateX(90deg) translateZ(100px)}.cube__face--bottom{-webkit-transform:rotateX(-90deg) translateZ(100px);transform:rotateX(-90deg) translateZ(100px)}@-webkit-keyframes spinCube{0%{-webkit-transform:translateZ(-200px) rotateX(0deg) rotateY(0deg);transform:translateZ(-200px) rotateX(0deg) rotateY(0deg)}to{-webkit-transform:translateZ(-200px) rotateX(180deg) rotateY(1turn);transform:translateZ(-200px) rotateX(180deg) rotateY(1turn)}}@keyframes spinCube{0%{-webkit-transform:translateZ(-200px) rotateX(0deg) rotateY(0deg);transform:translateZ(-200px) rotateX(0deg) rotateY(0deg)}to{-webkit-transform:translateZ(-200px) rotateX(180deg) rotateY(1turn);transform:translateZ(-200px) rotateX(180deg) rotateY(1turn)}}