3Dbanner旋转

　　首先你得先构思出旋转体，一个正方体是六个面(因为这里不需要上下面，所以去掉,就只需要四个面)，把正方体视为一个盒子模型(ul)

　　然后在盒子下面有4个子元素(li),通过定位分别形成四个面。

　　最后让ul盒子绕y轴旋转来过渡所看到得banner视图。

　　过程中需要注意得:

　　1、正方体盒子需要加上 transform-style: preserve-3d;是的其子元素以3d呈现

　　2、perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。(可加可不加。)

　html:

    <div class="banner">
        <ul>
            <li style="transform: translateZ(-200px)">
                <img src="https://www.qizcms.com/static/default/web/images/bannera.jpg"/>
            </li>
            <li style="transform:translateX(-50%) rotateY(90deg);">
                <img src="https://www.qizcms.com/static/default/web/images/bannerb.jpg"/>
            </li>
            <li style="transform: translateX(50%) rotateY(90deg);">
                <img src="https://www.qizcms.com/static/default/web/images/bannerc.jpg"/>
            </li>
            <li style="transform: translateZ(200px)">
                <img src="https://www.qizcms.com/static/default/web/images/bannera.jpg"/>
            </li>
        </ul>
    </div>

　css:

    .banner{
        width: 400px;
        height: 250px;
        position: relative;
        margin: 100px auto 0;
        perspective: 1200px;
    }
    .banner ul {
        position: relative;
        width: 400px;
        height: 250px;
        transform-style: preserve-3d;
        transition: all 0.5s;
        transform-origin: 50% 50%;
        animation: rotY 5s ease-in-out infinite;
    }
    .banner ul li {
        list-style: none;
        width: 400px;
        height: 250px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .banner ul li img {
        width: 100%;
        height: 100%;
    }
    @keyframes rotY {
        0%{ transform: rotateY(0) }
        100%{ transform: rotateY(360deg) }
    }