纯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;
}

整个效果写出来，还是比较简单的，只要明白各个命令的意思，剩下的就是组织一下逻辑而已，或许对于部分人来说，六个面的方位是个难点；另一部分人来说，动画的书写是难点；还有一部分人来说。。。编不出来了，感觉真没有什么难点，所以也无法推测其他人认为的难点是哪里

感觉，还是前面写的那个弹跳小球比较麻烦点。