純html+css制作3D立方體和動畫效果

今天放上來的，是一個用css3制作的立方體+動畫，效果如下。

整個效果都只用了html和css，沒有一句js，其實起初是使用了js來給六個面的小方格們賦值，后來強迫症犯了，直接手動寫上吧，這樣一句js都沒有，更干脆利落點。

如下為body內整體結構，一個類名為big的盒子內，放置六個ul，每個ul賦予不同的類名，標明了ul面所在的位置，這六個ul會作為立方體的六個面。

<div class="big">
    <ul class="after"></ul>
    <ul class="left"></ul>
    <ul class="right"></ul>
    <ul class="top"></ul>
    <ul class="bottom"></ul>
    <ul class="before"></ul>
</div>

下面為大盒子big的css樣式，以及他要調用的css動畫的樣式。

.big {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 150px auto 0;
    transform-style: preserve-3D;
    animation: animate 6s infinite;
}
@keyframes animate {
    0% {
        transform: translate(-400px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    50% {
        transform: translate(400px) rotateX(0deg) rotateY(360deg) rotateZ(360deg);
    }
    100% {
        transform: translate(-400px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
}

下面為六個ul和li的統一樣式，包括大小、定位、文字的一些樣式等。

.big ul {
    width: 300px;
    height: 300px;
    position: absolute;
    font-size: 200px;
    text-align: center;
    line-height: 300px;
    color: #fff;
}
.big li {
    float: left;
    width: 80px;
    height: 80px;
    border-radius: 30%;
    margin: 10px;
    list-style: none;
    font-size: 50px;
    text-align: center;
    line-height: 80px;
}

下面為每個ul通過transfrom屬性，設置到不同的位置，以及內部li的背景顏色設置，這里只寫出了left類的書寫方式，其他五個面類似。

.left {
    transform: rotateY(-90deg) translateZ(150px);
}
.left li {
    background-color: #a9f;
    opacity: 0.9;
}

整個效果寫出來，還是比較簡單的，只要明白各個命令的意思，剩下的就是組織一下邏輯而已，或許對於部分人來說，六個面的方位是個難點；另一部分人來說，動畫的書寫是難點；還有一部分人來說。。。編不出來了，感覺真沒有什么難點，所以也無法推測其他人認為的難點是哪里

感覺，還是前面寫的那個彈跳小球比較麻煩點。