Html
    Css
    Js

    
                        
body {
	background:#000;
}
* {
	margin:0px;
}
/*wrap start*/
#wrap {
	width:120px;
	height:180px;
	margin:50px auto;
	position:relative;
	transform-style:preserve-3D;
	/*变幻风格为3D*/
				/*perspective:800px;
	景深*/
				transform:perspective(800px) rotateX(-12deg);
}
#wrap img {
	position:absolute;
	top:0;
	left:0;
	transform:rotateY(32deg);
	box-shadow:0px 0px 20px #fff;
	/*盒阴影 下方 距离7px . 渐变*/
				-webkit-box-reflect:below 7px
				-webkit-linear-gradient(top,rgba(0,0,0,0)50%,rgba(0,0,0,1));
	/*倒影*/
				-moz-box-reflect:below 7px
				-moz-linear-gradient(top,rgba(0,0,0,0)50%,rgba(0,0,0,1));
}
/*end wrap*/

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

3d图片翻转

0