css3 图片翻转效果 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{margin:0; padding:0;}
	.box{
		position:relative;
		width:300px;
		height:300px;
		margin:100px auto;
		background:url('img/IconImg1.jpg') center top no-repeat;
		overflow:hidden;
		
	}

	.box1{
		width:300px;
		height:300px;
		background:rgba(255,255,255,0.5);
		-webkit-transition:all 0.2s ease 0s;
		transition:all 0.2s ease 0s;
		-webkit-transform:scale(1);
		transform:scale(1);
		border-radius:50%;
		
	}
	.box2{
		position:absolute;
		left:0;
		top:0;
		width:300px;
		height:300px;
		background:white;
		-webkit-transform:scale(0.8);
		transform:scale(0.8);
		border-radius:50%;
	}
	.box img{
		position:absolute;
		top:30px;
		left:30px;
		width:240px;
		height:240px;
		background:url('img/IconImg1.jpg') center top no-repeat;
		
		border-radius:50%;
		
		transition:all 0.4s ease-in-out;
		transform:rotateY(-180deg);
		-webkit-transform:rotateY(-180deg);
		
	}
	
	.box:hover .box1{
		-webkit-transform:scale(0.8);
		transform:scale(0.8);
	}	
	.box:hover img{
		transform:rotateY(0deg);
		-webkit-transform:rotateY(0deg);
		
	}

	</style>
</head>
<body>
	<div class="box">
		<div class="box1">
			
		</div>
		<a href="#">
				<div class="box2"></div>
				<img src="img/IconImg1.jpg" alt="">
		</a>
	</div>
</body>
</html>

　　

posted @ 2016-04-07 23:41  mingjixiaohui  阅读(242)  评论(0)    收藏  举报