Html
    Css
    Js

    
                        
img {
	height:500px;
	width:300px;
}
/* 整体动画 */
			
			@keyframes entry {
	0% {
	top:-20%;
	opacity:0.1;
}
100% {
	top:0%;
}
}.wrapper {
	position:absolute;
	top:10%;
	left:40%;
	width:300px;
	height:500px;
	perspective:900px;
}
.container {
	position:absolute;
	top:0%;
	width:100%;
	height:100%;
	transition:.5s all ease;
	transform:rotateX(60deg) scale(0.7);
	perspective:900px;
	box-shadow:0px 20px 50px #555;
	animation:entry 1s linear 1;
}
#c0 {
	position:absolute;
	top:0%;
	width:100%;
	height:100%;
	background:linear-gradient(to bottom,#eba65b 30%,#d99267 100%);
	z-index:300;
	box-shadow:0px 20px 100px #555;
}
#c1 {
	background:linear-gradient(to bottom,#59476f 30%,#7b88d1 100%);
	box-shadow:0px 20px 100px #555;
	left:100%;
	z-index:0;
}
#c2 {
	left:-100%;
	z-index:0;
	background:linear-gradient(to bottom,#59476f 30%,#7b88d1 100%);
	box-shadow:0px 20px 100px #555;
}
.container:hover {
	cursor:pointer;
	transform:rotate(0deg) scale(1) translateY(10px);
	transition:.5s all ease;
	z-index:400;
}

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

图片立体平铺效果(原创)

纯css代码  直接替换为自己的图片即可,更改定位属性可改变容器位置

0