<!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;/*将所有子元素呈现在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)/*用translateZ将面都沿着Z轴平移了100像素*/ } 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); } </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>