* { margin: 0; padding: 0; } body { background-color: #000; color: #ccc; cursor: pointer; } .stage { width: 800px; height: 400px; border: 1px solid #000; margin: 0 auto; perspective: 900px; } .stage .actor { width: 800px; height: 400px; position: relative; transform-style: preserve-3d; transition: all 1s ease 0s; } .stage .actor ul { list-style: none; } .stage .actor ul li { position: absolute; left: 300px; top: 100px; } .stage .actor ul li img { width: 220px; height: 250px; /*倒影设置*/ -webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 100%); }
3d环绕css3效果图 有注释,简单易懂