3D自动旋转图（HTML5）

来源：互联网发布：gopro软件中文版编辑：程序博客网时间：2024/05/14 16:29
代码如下：
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;            padding: 0;        }        li{            list-style: none;        }        ul{            width:200px;            height:200px;            margin: 200px auto;            position: relative;            animation: run 3s linear infinite;            animation-fill-mode: forwards;            transform-style: preserve-3d;        }        ul li{            width:200px;            height:200px;            opacity: 0.5;            position: absolute;            left: 0;            top:0;        }        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:nth-child(6){            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