Html
    Css
    Js

    
                        
* {
	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%);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

简单的3D图片旋转

纯javascriptt

0