Html
    Css
    Js

    
                        
body {
	background-color:#2B2B2B;
}
.frame {
	width:730px;
	height:336px;
	margin:50px auto;
}
.box {
	width:730px;
	height:336px;
	position:relative;
	transform-style:preserve-3d;
	transition:transform 1s;
}
.box img {
	position:absolute;
	left:0;
	top:0;
}
.box img:nth-of-type(1) {
	transform:rotateX(0deg) translateZ(125px);
}
.box img:nth-of-type(2) {
	transform:rotateX(90deg) translateZ(125px);
}
.box img:nth-of-type(3) {
	transform:rotateX(180deg) translateZ(125px);
}
.box img:nth-of-type(4) {
	transform:rotateX(270deg) translateZ(125px);
}

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

3D图片翻转(纯js实现)

0