* { margin:0; padding:0; pointer-events:none; -webkit-user-select:none; -moz-user-select:none; -o-user-select:none; -ms-user-select:none; user-select:none; border-radius:5px; } body { background:#000; } dl { width:180px; height:340px; position:relative; margin:150px auto 0; -webkit-transform-style:-webkit-preserve-3d; transform-style:preserve-3d; } dd { width:180px; height:340px; position:absolute; top:0; left:0; } img { width:100%; height:100%; } dt { width:900px; height:900px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotateX(90deg) translateZ(-200px); background:-moz-radial-gradient(center center,farthest-side,#fff5,#0005); background:-webkit-radial-gradient(center center,farthest-side,#fff5,#0005); background:-o-radial-gradient(center center,farthest-side,#fff5,#0005); background:radial-gradient(center center,farthest-side,#fff5,#0005); } .inverteds { transform:scaleY(-1); position:absolute; left:0; top:370px; width:180px; height:340px; opacity:0.5; } .inverted { position:relative; width:180px; height:340px; } .inverted::before { content:''; display:block; position:absolute; width:100%; height:100%; top:0; left:0; background:-moz-radial-gradient(bottom,circle farthest-side,#0000,#000 66%); background:-webkit-radial-gradient(bottom,circle farthest-side,#0000,#000 66%); background:-o-radial-gradient(bottom,circle farthest-side,#0000,#000 66%); background:radial-gradient(bottom,circle farthest-side,#0000,#000 66%); }
纯javascriptt