.detached {
              transform-style: detached;
            }

            .cube {
                position: fixed;
                top: 300px;
                left: 650px;
                transform: translate(-50%, -50%);
                width: 180px;
                height: 80px;
                margin: 0 auto;
                transform-style: preserve-3d;
                animation: spinCube 8s infinite ease-in-out;
            }

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

            .cube__face {
                position: absolute;
                width: 100px;
                height: 100px;
                border: 1px solid black;
                vertical-align: middle;
                text-align: center;
            }

            .cube__face p {
                line-height: 40px;
                font-size: 21px;
                font-weight: bold;
                color: white;
            }

            .cube__face--front  { background: #FFFFFF; transform: rotateY(0deg) translateZ(50px);   }
            .cube__face--right  { background: #ACEB68; transform: rotateY(90deg) translateZ(50px);  }
            .cube__face--back   { background: #00C1D4; transform: rotateY(180deg) translateZ(50px); }
            .cube__face--left   { background: #F12742; transform: rotateY(-90deg) translateZ(50px); }

          
        

          
            <div class="cube">
                 <div class="cube__face detached cube__face--front">fro</div>
                 <div class="cube__face detached cube__face--right">rig</div>
                 <div class="cube__face detached cube__face--back">bac</div>
                 <div class="cube__face detached cube__face--left">lef</div>
            </div>