<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{margin:0;padding:0;} body{background: black;} div{ width:400px; height:400px; border:1px solid pink; perspective:500px; perspective-origin: top; } ul{ position: relative; transform-style: preserve-3d; margin:150px; } li{position:absolute; width:100px; height:100px; background:pink; opacity:0.3;} ul li:nth-child(2n){background: yellow;} ul li:nth-child(1){ transform:translateZ(200px); } ul li:nth-child(12){ transform:translateZ(-200px); } ul li:nth-child(2){ transform:rotateY(90deg)translateZ(200px); } ul li:nth-child(11){ transform:rotateY(-90deg)translateZ(200px); } ul li:nth-child(3){ transform:rotateY(30deg)translateZ(200px); } ul li:nth-child(10){ transform:rotateY(-150deg)translateZ(200px); } ul li:nth-child(4){ transform:rotateY(60deg)translateZ(200px); } ul li:nth-child(9){ transform:rotateY(-120deg)translateZ(200px); } ul li:nth-child(5){ transform:rotateY(120deg)translateZ(200px); } ul li:nth-child(8){ transform:rotateY(-60deg)translateZ(200px); } ul li:nth-child(6){ transform:rotateY(150deg)translateZ(200px); } ul li:nth-child(7){ transform:rotateY(-30deg)translateZ(200px); } </style> </head> <body> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> </ul> </div> </body> </html>
