<!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>
3D
最新推荐文章于 2022-09-23 15:00:02 发布