css3實現正方體

樣式文件

    <style>
        .container{
            width: 200px;
            height: 200px;
            perspective: 1000px;
        }
        .piece{
            height: 200px;
            width: 200px;
            position: absolute;
            text-align: center;
            line-height: 200px;
        }

        .piece-box{
            perspective-origin: 25% 25%;
            transform-style: preserve-3d;
            width: 100%;
            height: 100%;
            position: relative;
            margin: 100px;
            animation: twirls 3s linear infinite;
            animation-fill-mode: forwards;
        }
        @keyframes twirls {
            from{
                transform: rotateX(0deg) rotateY( 0deg) rotateZ( 0deg);
            }
            to{
                transform:rotateX(360deg)  rotateY(360deg) rotateZ(360deg) ;
            }
        }
        .piece-1{
            background-color: red;
            transform: rotateY(0deg) translateZ(100px) ;
           /* transform:  rotateY(0deg) translateZ(100px)  translateX(-100px);*/
        }
        .piece-2{
            background-color: yellow;
            transform: rotateY(-90deg) translateZ(-100px) ;
            /*transform: rotateY(90deg) ;*/
        }
        .piece-3{
            background-color: blue;
            transform: rotateY(0deg) translateZ(-100px);
           /* transform: rotateY(0deg)   translateZ(-100px)  translateX(-100px);*/
        }
        .piece-4{
            background-color: green;
            transform: rotateY(90deg)translateZ(-100px) ;
            /*transform: rotateY(90deg)  translateZ(-200px) ;*/
        }
        .piece-5{
            background-color: cyan;
            transform:rotateX(90deg) translateZ(100px) ;
           /* transform:rotateX(90deg)  translateZ(100px)  translateX(-100px);*/
        }
        .piece-6{
            background-color: purple;
            transform:  rotateX(90deg) translateZ(-100px);
           /* transform: rotateX(90deg) translateZ(-100px)   translateX(-100px);*/
        }

    </style>

　　html

<div class="container">
    <div class="piece-box">
        <div class="piece piece-1">前</div>
        <div class="piece piece-2">右</div>
        <div class="piece piece-3">後</div>
        <div class="piece piece-4">左</div>
        <div class="piece piece-5">頂</div>
        <div class="piece piece-6">底</div>
    </div>
</div>