* {
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