<!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>
