* { margin:0; padding:0; font-size:0; } html,body { width:100%; height:100%; display:flex; display:-webkit-flex; background:-webkit-radial-gradient(#490338 10%,#000); perspective:900px; overflow:hidden; } #album { width:133px; height:200px; margin:auto; position:relative; transform-style:preserve-3d; transform:rotateX(-20deg); } #album img { position:absolute; top:0; left:0; width:100%; height:100%; /* 反射倒影 距离下面5px */ -webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5)); } #album p { position:absolute; left:calc(133px/2 - 800px/2); top:calc(200px/2 - 800px/2); width:800px; height:800px; background:rgba(255,255,255,0.1); transform:translateY(100px) rotateX(90deg); border-radius:50%; }
利用css3-webkit-box-reflect 倒影属性;10张图片旋转分散 每张旋转360° / 10 = 36°,及鼠标按下拖拽抬起的变化实现!