<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul{ position: relative; width: 200px; height: 200px; transform-style: preserve-3d; margin: 250px auto; animation: run 5s infinite linear; } li{ list-style: none; width:200px; height: 200px; position: absolute; left: 0; top: 0; opacity: 0.4; } li:first-child{ background: red; transform: translateZ(100px) } li:nth-child(2){ background: green; transform: translateY(-100px) rotateX(90deg); } li:nth-child(3){ background: pink; transform: translateY(100px) rotateX(90deg); } li:nth-child(4){ background: orange; transform: translateX(-100px) rotateY(90deg); } li:nth-child(5){ background: blue; transform: translateX(100px) rotateY(90deg); } li:nth-child(6){ background: blue; transform: translateZ(-100px); } @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>
H5 实现一个正方体旋转
最新推荐文章于 2024-04-01 01:28:13 发布