3D轮播图

3D轮播图：一个立方体不断旋转四个面来轮播广告

css3代码：

    *{
        margin: 0;
        padding: 0;
    }
    ul{ 
        margin: 0 auto;
        margin-top: 200px;
        width: 295px;
        height: 160px;
        transform-style: preserve-3d;
        animation: mykeyframe 5s linear infinite;
    }
    @keyframes mykeyframe{
      from{
        transform: rotateX(0deg) rotateY(0deg);
      }
      to{
        transform: rotateX(360deg) rotateY(0deg);
      }
    }
    li{
        width: 294px;
        height: 160px;
        position: absolute;
        float: left;
        font-size: 50px;
        list-style: none;
    }
    li:nth-child(1){
        background: url(images/aaaa.jpg);
        background-size: 100%;
        transform: translateY(80px) rotateX(90deg);
    }
    li:nth-child(2){
        background: url(images/aaaa.jpg);
        transform: translateY(-80px) rotateX(90deg);
    }
    li:nth-child(3){
        background: url(images/aaaa.jpg);
        transform: translateZ(80px);
    }
    li:nth-child(4){
        background: url(images/aaaa.jpg);
        transform: translateZ(-80px);
    }

html代码

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

css3中的3d坐标

1. 若要产生3d立体轮播图首先先建立一个ul ，再建立四个 li，分别为立方体的四个面，且li为绝对定位就可以将li落在一块，li与ul大小相同。
2. 最终达到的立体效果即翻转四个面达成效果
3. 演示第一个面的应实现的效果
   黑框为ul。红色正方形为 li，即第一个面，
   先translateY(80px);使li向上移动半个宽度
   在使用 rotateX(90deg);使li以x轴旋转90度（注：旋转的轴位于图形的中间）
   得到效果
   
   （注：黑框为ul 红框为第一个li）
4. 第二个li向下移动半个宽度，再选装90度即可得到下面
5. 第三个li沿z轴向前移动半个宽度即可得到前面
6. 第四个li沿z轴向后移动半个宽度即可得到后面
7. 这样即可得到一个立方体的四个面，但此时的ul仍然是一个平面
8. 为ul增加属性 transform-style: preserve-3d; 使ul拥有厚度，即可的到立体
9. 为ul设置旋转动画，沿x轴旋转360度为一次动画，得到最终效果