利用css实现简单的旋转木马

一.确定要达到的效果

        1.旋转木马的形状

        2.触碰会旋转

        3.实现3d效果

二.效果实现

        1.html部分

                只需要旋转木马内部的照片，以列表的形式展现。

<div class="parent">
        <ul>
            <li>
                <img src="../images/1.jpg" alt="">
            </li>
            <li>
                <img src="../images/10.jpg" alt="">
            </li>
            <li>
                <img src="../images/11.jpg" alt="">
            </li>
            <li>
                <img src="../images/12.jpg" alt="">
            </li>
            <li>
                <img src="../images/13.jpg" alt="">
            </li>
            <li>
                <img src="../images/14.jpg" alt="">
            </li>
        </ul>
    </div>

        2.css部分

                利用旋转、平移与3d模块进行css的书写

    * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        img {
            display: block;
            width: 150px;
            height: 100px;
        }

        .parent {
            width: 600px;
            height: 300px;
            border: 1px black solid;
            margin: 30px auto;
            perspective: 700px;
        }

        .parent ul {
            width: 128px;
            height: 94px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            transition: 2s;
        }

        .parent ul li {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .parent ul li:nth-child(1) {
            transform: rotateY(0) translateZ(200px);
        }

        .parent ul li:nth-child(2) {
            transform: rotateY(60deg) translateZ(200px);
        }

        .parent ul li:nth-child(3) {
            transform: rotateY(120deg) translateZ(200px);
        }

        .parent ul li:nth-child(4) {
            transform: rotateY(180deg) translateZ(200px);
        }

        .parent ul li:nth-child(5) {
            transform: rotateY(240deg) translateZ(200px);
        }

        .parent ul li:nth-child(6) {
            transform: rotateY(300deg) translateZ(200px);
        }

        .parent:hover ul {
            transform: rotateY(360deg);
        }

效果图如下，触碰会进行旋转