用css寫一個簡單的旋轉立方體

1.html

    <div class="world">
        <div id="cube" tabindex="0">
            <div id="cube__front"></div>
            <div id="cube__back"></div>
            <div id="cube__left"></div>
            <div id="cube__right"></div>
            <div id="cube__top"></div>
            <div id="cube__bottom"></div>
        </div>
    </div>

2.css

/*定義外層，perspective是透視角*/
.world {
    perspective: 800px;
    width: 200px;
    height: 200px;
    margin: 200px;
}

/*設置視圖爲3d，使用旋轉動畫*/
#cube {
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    animation: rotator 5s linear infinite;
}

/*設置每一片的基礎樣式*/
#cube * {
    box-shadow: 0 0 3px currentColor;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*設置一定的翻轉角度使6片形成正方體*/
#cube__front {
    color: deeppink;
    transform: translateZ(100px);
}

#cube__back {
    color: seagreen;
    transform: rotateY(180deg) translateZ(100px);
}

#cube__right {
    color: lightcoral;
    transform: rotateY(90deg) translateZ(100px);
}

#cube__left {
    color: skyblue;
    transform: rotateY(-90deg) translateZ(100px);
}

#cube__top {
    color: mediumseagreen;
    transform: rotateX(90deg) translateZ(100px);
}

#cube__bottom {
    color: dodgerblue;
    transform: rotateX(-90deg) translateZ(100px);
}


/*簡單的動畫*/
@keyframes rotator {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}