09 - CSS3 - 3D立方体效果

---

本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!

博客地址 点击跳转

---

< ! ---------- HTML ----------- >

<ul>
    <li>
        ![](素材/yx1.jpg)
    </li>
    <li>
        ![](素材/yx2.jpg)
    </li>
    <li>
        ![](素材/yx3.jpg)
    </li>
    <li>
        ![](素材/yx4.jpg)
    </li>

    <li>5</li>
    <li>6</li>
</ul>

< ! --------- Style --------------- >

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        perspective: 500px;
    }
    ul{
        width: 200px;
        height: 200px;
        /*border: 1px solid #000;*/
        /*box-sizing: border-box;*/
        margin: 100px auto;

        position: relative;
        transform-style: preserve-3d;

        /*transform: rotateY(0deg) rotateX(0deg);*/
        animation: sport 5s linear 0s infinite;
    }
    ul li{
        list-style: none;
        width: 200px;
        height: 200px;

        position: absolute;
        left: 0;
        top: 0;
    }
    ul li:nth-child(1){
        background-color: red;
        transform: rotate(0deg) translateZ(100px) scaleX(2);
    }
    ul li:nth-child(2){
        background-color: green;
        transform: rotateX(90deg) translateZ(100px) scaleX(2);
    }
    ul li:nth-child(3){
        background-color: pink;
        transform: rotateX(180deg) translateZ(100px) scaleX(2);
    }
    ul li:nth-child(4){
        background-color: blue;
        transform: rotateX(270deg) translateZ(100px) scaleX(2);
    }
    ul li:nth-child(5){
        background-color: purple;
        /*transform: rotateY(90deg) translateZ(100px);*/
        transform: rotateY(90deg) translateZ(200px);
    }
    ul li:nth-child(6){
        background-color: skyblue;
        /*transform: rotateY(270deg) translateZ(100px);*/
        transform: rotateY(270deg) translateZ(200px);
    }
    ul li img{
        width: 200px;
        height: 200px;
    }
    @keyframes sport {
        from{
            transform: rotateX(0deg);
        }
        to{
            transform: rotateX(360deg);
        }
    }
</style>

< ! --------- 效果展示 ---------- >

**CSS3 - 3D立方体**