css3+3D旋转transform最容易忽视的一个错误，你中标了么，附完整例子代码

先上代码：MM的辛酸泪啊

<template>
    <div class="rotate">
        <ul class="rotate-box">
            <li
                class="rotate-item"
                :class="'item-'+(index+1)"
                v-for="(item,index) of picList"
                :key="index"
            >
                <img class="rotate-img" :src="item.path">
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            picList: [
                {
                    id: 1,
                    path: require("./../assets/img/1.jpg"),
                    url: "http://www.baidu.com"
                },
                {
                    id: 2,
                    path: require("./../assets/img/2.jpg"),
                    url: "http://www.baidu.com"
                },
                {
                    id: 3,
                    path: require("./../assets/img/3.jpg"),
                    url: "http://www.baidu.com"
                },
                {
                    id: 4,
                    path: require("./../assets/img/4.jpg"),
                    url: "www.baidu.com"
                },
                {
                    id: 5,
                    path: require("./../assets/img/5.jpg"),
                    url: "www.baidu.com"
                },
                {
                    id: 6,
                    path: require("./../assets/img/6.jpg"),
                    url: "www.baidu.com"
                }
            ]
        };
    }
};
</script>

<style lang="less" scoped>
.rotate {
    width: 80%;
    min-height: 300px;
    margin: 10%;
    perspective: 800px;
    .rotate-box {
        position:absolute;
        left:calc(50% - 150px);
        width: 300px;
        height: 300px;
        transform-style: preserve-3d;
        transform: rotateX(-30deg);
        // animation:rotate3D 3s linear 0s infinite;
        .rotate-item {
            width: 300px;
            height: 300px;
            overflow:hidden;
            position: absolute;
            text-align: center;
        }
        //************************重点 start**********************
        .item-1{
            transform:translateZ(300px) rotateY(0deg) ;
        }
        .item-2{
            transform:translateZ(300px) rotateY(60deg);
        }
        .item-3{
            transform:translateZ(300px) rotateY(120deg);
        }
        .item-4{
            transform:translateZ(300px) rotateY(180deg);
        }
        .item-5{
            transform:translateZ(300px) rotateY(240deg);
        }
        .item-6{
            transform:translateZ(300px) rotateY(300deg);
        }
        //**********************重点 end************************
    }
}
</style>

咤一看，嘿，这代码真没什么错，先看代码展示的效果，嚯，MMP

这显然不是我想要的效果
我想要的是下面这个效果好不啦

其实这里有一个做容易忽视的一个错误，尤记得当初我还给全班同学讲过这个例子呢 -.-!!!多年不碰3D，竟然上来就犯了这个错误！！！
其实是transform属性值惹的祸：先旋转再平移和先平移再选中
不可否认CSS中属性顺序随意一点没啥，甚至属性值随意一点也没啥，但是就是这个transform的属性值，你随意它就给你随意，千万注意，写此文章以警示自个儿
下面是正确和错误样式对比代码如果copy过来需修改哦

.item-1{
            transform:rotateY(0deg) translateZ(300px);
            transform:translateZ(300px) rotateY(0deg) ;
        }
        .item-2{
            transform:rotateY(60deg) translateZ(300px);
            transform:translateZ(300px) rotateY(60deg);
        }
        .item-3{
            transform:rotateY(120deg) translateZ(300px);
            transform:translateZ(300px) rotateY(120deg);
        }
        .item-4{
            transform:rotateY(180deg) translateZ(300px);
            transform:translateZ(300px) rotateY(180deg);
        }
        .item-5{
            transform:rotateY(240deg) translateZ(300px);
            transform:translateZ(300px) rotateY(240deg);
        }
        .item-6{
            transform:rotateY(300deg) translateZ(300px);
            transform:translateZ(300px) rotateY(300deg);
        }

对了，还有动画也放上去，想看效果的把图片换成自个儿的或者换成全路径的网上图片自己查看效果去吧

@keyframes rotate3D{
    from {
        transform: rotateX(-30deg) rotateY(0deg);
    }
    to {
        transform: rotateX(-30deg) rotateY(360deg);
    }
}

算了，直接放个完整代码吧：

<template>
    <div class="rotate">
        <ul class="rotate-box">
            <li
                class="rotate-item"
                :class="'item-'+(index+1)"
                v-for="(item,index) of picList"
                :key="index"
            >
                <img class="rotate-img" :src="item.path">
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            picList: [
                {
                    id: 1,
                    path: require("./../assets/img/1.jpg"),
                    url: "http://www.baidu.com"
                },
                {
                    id: 2,
                    path: require("./../assets/img/2.jpg"),
                    url: "http://www.baidu.com"
                },
                {
                    id: 3,
                    path: require("./../assets/img/3.jpg"),
                    url: "http://www.baidu.com"
                },
                {
                    id: 4,
                    path: require("./../assets/img/4.jpg"),
                    url: "www.baidu.com"
                },
                {
                    id: 5,
                    path: require("./../assets/img/5.jpg"),
                    url: "www.baidu.com"
                },
                {
                    id: 6,
                    path: require("./../assets/img/6.jpg"),
                    url: "www.baidu.com"
                }
            ]
        };
    },
    mounted() {
    }
};
</script>

<style lang="less" scoped>
.rotate {
    width: 80%;
    min-height: 300px;
    margin: 10%;
    perspective: 800px;
    .rotate-box {
        position:absolute;
        left:calc(50% - 150px);
        width: 300px;
        height: 300px;
        transform-style: preserve-3d;
        transform: rotateX(-30deg);
        animation:rotate3D 5s linear 0s infinite;
        .rotate-item {
            width: 300px;
            height: 300px;
            overflow:hidden;
            position: absolute;
            text-align: center;
            cursor: pointer;
        }
        .item-1{
            transform:rotateY(0deg) translateZ(300px);
        }
        .item-2{
            transform:rotateY(60deg) translateZ(300px);
        }
        .item-3{
            transform:rotateY(120deg) translateZ(300px);
        }
        .item-4{
            transform:rotateY(180deg) translateZ(300px);
        }
        .item-5{
            transform:rotateY(240deg) translateZ(300px);
        }
        .item-6{
            transform:rotateY(300deg) translateZ(300px);
        }
    }
    .rotate-box:hover{
        animation-play-state:paused;
    }
}
@keyframes rotate3D{
    from {
        transform: rotateX(-30deg) rotateY(0deg);
    }
    to {
        transform: rotateX(-30deg) rotateY(360deg);
    }
}
</style>