#container{

           width: 400px;

           height: 400px;

           -webkit-perspective:;

           perspective:;

           -webkit-perspective-origin:50% 225px;

           perspective-origin:50% 225px;         

         }

         #stage{

           width: 300px;

           height:300px;

           -webkit-transition: -webkit-transform 2s;

                   transition: transform 2s;

           -webkit-transform-style: preserve-3d;

           transform-style: preserve-3d;          

         }

         #shape{

           width: 200px;

           height:200px;

           position: relative;

           top: 100px;

           margin:0 auto;

           transform-style: preserve-3d;

         }

         #shape{

             -webkit-animation: spin 8s infinite linear;

         }

         .plane{

             position: absolute;

             width: 200px;

             height:200px;

             background: #c23c00;

             border: 1px solid #000;

             font-size: 100px;

             color:#fff;

             text-align: center;

             line-height: 200px;

             -webkit-transition: -webkit-transform 2s, opacity 2s;

             transition: transform 2s, opacity 2s;

             -webkit-backface-visibility: hidden;

             backface-visibility: hidden;

           }

           #shape.backface .plane{

             -webkit-backface-visibility: visible;

             backface-visibility: visible;

           }

           .cube>.one{

             opacity: 0.5 ;

             -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);

             transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px)

           }

           .cube>.two{

             opacity: 0.5 ;

             -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);

             transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);

           }

           .cube>.three{

             opacity: 0.5 ;

             -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);

             transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);

           }

           .cube > .four{

             opacity: 0.5 ;

             -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);

             transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);

           }

           .cube > .five{

             opacity: 0.5 ;

             -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);

             transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);

           }

           .cube > .six{

             opacity: 0.5 ;

             -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px);

             transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px);

           }

         @-webkit-keyframes spin{

           0% {

              -webkit-transform : rotateY(0);

              transform : rotateY(0);

             }

           100% {

             -webkit-transform : rotateY(-360deg);

              transform : rotateY(-360deg);

           }

         }

         @keyframes spin{

            0% {

              -webkit-transform : rotateY(0);

              transform : rotateY(0);

             }

           100% {

             -webkit-transform : rotateY(-360deg);

              transform : rotateY(-360deg);

           }

         }

<div id="container" >

       <div id="stage">

         <div id="shape" class="cube backface">

            <div class="plane one">1</div>

            <div class="plane two">2</div>

            <div class="plane three">3</div>

            <div class="plane four">4</div>

            <div class="plane five">5</div>

            <div class="plane six">6</div>

         </div>

       </div>

</div>