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>
