3D动画

来源：互联网发布：www.ubuntu.com 编辑：程序博客网时间：2024/04/28 16:02
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;            padding: 0;        }        ul{            position: relative;            width: 200px;            height: 200px;            margin: 200px auto;            transform-style:preserve-3d;            animation: run 3s linear infinite;            animation-fill-mode: none;        }        ul li{            position: absolute;            list-style: none;            left: 0;            top: 0;            width: 200px;            height: 200px;            opacity: 0.5;        }        ul li:first-child {            transform: translateY(100px) rotateX(90deg);            background: red;        }        ul li:nth-child(2) {            transform: translateX(100px) rotateY(90deg);            background: blue;        }        ul li:nth-child(3) {            transform: translateY(-100px) rotateX(90deg);            background: green;        }        ul li:nth-child(4) {            transform: translateX(-100px) rotateY(90deg);            background: yellow;        }        ul li:nth-child(5) {            transform: translateZ(-100px);            background: orange;        }        ul li:last-child {            transform: translateZ(100px);            background: pink;        }        @keyframes run {            0% {                transform: rotateX(0deg) rotateY(0deg);            }            100% {                transform: rotateX(360deg) rotateY(360deg);            }        }    </style></head><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