3D

来源：互联网发布：锦里宽窄巷子知乎编辑：程序博客网时间：2024/04/26 11:28
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><style>    ul li{        list-style: none;    }    ul{        width: 300px;        height: 300px;        margin: 100px auto;        position: relative;        transform-style: preserve-3d;        animation: run 3s linear infinite;    }    li{        font-size: 50px;        text-align: center;        width: 300px;        height:300px;        position: absolute;        top: 0;        opacity: 0.7;        left: 0;        background-color: blue;    }    li{        font-size: 50px;        text-align: center;        width: 300px;        height: 300px;        position: absolute;        top: 0;        opacity: 0.7;        left:0;        background-color: #00C5CD;    }    li:first-child{        background-color: #ff3f00;        transform:translateY(150px) rotateX(90deg) ;    }    ul li:nth-child(2){        background-color: #00EE00;        transform:translateX(150px) rotateY(90deg) ;    }    ul li:nth-child(3){        background-color: #0f4e00;        transform:translateY(-150px) rotateX(90deg) ;    }    ul li:nth-child(4){        background-color: #FFE0F0;        transform:translateX(-150px) rotateY(90deg) ;    }    ul li:nth-child(5){        background-color: #002f2f;        transform:translateZ(-150px);    }    ul li:nth-child(6){        background-color: #3ef1ee;        transform:translateZ(150px) ;    }    @keyframes run {        0% {            transform: rotateX(0deg) rotateY(0deg);        }        100% {            transform: rotateX(360deg) rotateY(360deg);        }    }</style><body>    <ul>        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>        <li>6</li>    </ul></body></html>
阅读全文
0 0