css实现邮票边框折角照片墙效果代码-html代码-BFW代码库

css实现邮票边框折角照片墙效果代码

代码语言：html

代码描述：css实现邮票边框折角照片墙效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
<style>
    *{
	padding:0px;
	margin:0px;
}
body{
	background:#f5f5f5; 
	
}
h1{
	color:#2F3238;
	text-align:center;
}
.content_photo{
	margin:60px auto;
	position:relative;
	width:1000px;
	
}
img{
	position:absolute;
	padding:10px;
	background:#fff;
	border: none;
	border-radius:6px;
	width:240px;
	height:160px;
	
	/*position:absolute;*/
	-webkit-transition:1s;
	z-index:1;
	background: radial-gradient( transparent 0px, transparent 4px, white 4px, white );
	background-size: 20px 20px;
	background-position: -10px -10px;
	
}
img:hover{
	
	-webkit-transform: rotate(0deg);
	-webkit-transform: scale(1.5);
	-webkit-box-shadow:10px 10px 15px #ccc; 
	z-index:999;
	border-bottom-right-radius:140px 30px;
}
.img01{
	top:70px;
	left:350px;
	transform: rotate(5deg);
	-o-transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
}
.img02{
	top:-10px;
	left:530px;
	-o-transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
}
.img03{
	top:-30px;
	left:30px;
	-o-transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
}
.img04{
	top:130px;
	left:60px;
	-o-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
}
.img05{
	top:30px;
	left:180px;
	-o-transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
}
.img06{
	top:160px;
	left:560px;
	-o-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-ms-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
}
.img07{
	top:260px;
	left:560px;
	-o-transform: rotate(30deg);
	-webkit-transform: rotate(-30deg);
	-ms-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
}
.img08{
	top:250px;
	left:50px;
	-o-transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
	-ms-transform: rotate(-.........完整代码请登录后点击上方下载按钮下载查看