1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 body{ 12 background-color: black; 13 perspective: 800px; 14 } 15 .box{ 16 width: 155px; 17 height: 360px; 18 margin: 100px auto; 19 /* background-color: green;*/ 20 position: relative; 21 } 22 .box ul{ 23 background-color: yellow; 24 list-style: none; 25 transform-style: preserve-3d; 26 } 27 .box ul li{ 28 background-color: pink; 29 width: 155px; 30 height: 360px; 31 position: absolute; 32 left: 0; 33 top: 0; 34 transform-origin: bottom; 35 border-radius: 20px; 36 box-shadow: 0px 0px 20px 0px #000; 37 transition:1s; 38 } 39 .box ul li:nth-child(1){ 40 transform: translateZ(0px) rotate(-45deg); 41 42 } 43 .box ul li:nth-child(1):hover{ 44 transform: translateZ(100px) rotate(-45deg); 45 } 46 47 .box ul li:nth-child(2){ 48 transform: translateZ(10px) rotate(-22.5deg); 49 } 50 .box ul li:nth-child(2):hover{ 51 transform: translateZ(100px) rotate(-22.5deg); 52 } 53 .box ul li:nth-child(3){ 54 transform: translateZ(20px); 55 } 56 .box ul li:nth-child(3):hover{ 57 transform: translateZ(100px); 58 } 59 .box ul li:nth-child(4){ 60 transform: translateZ(10px) rotate(22.5deg); 61 } 62 .box ul li:nth-child(4):hover{ 63 transform: translateZ(100px) rotate(22.5deg); 64 } 65 .box ul li:nth-child(5){ 66 transform: translateZ(0px) rotate(45deg); 67 } 68 .box ul li:nth-child(5):hover{ 69 transform: translateZ(100px) rotate(45deg); 70 } 71 </style> 72 <script src='jquery.js'></script> 73 </head> 74 <body> 75 76 <div class="box"> 77 <ul> 78 <li></li> 79 <li></li> 80 <li></li> 81 <li></li> 82 <li></li> 83 </ul> 84 </div> 85 86 87 </body> 88 </html>