<!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>
3D动画
最新推荐文章于 2020-12-19 11:58:46 发布