<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片翻转</title>
<style>
.item{
position: relative;
cursor: pointer;
}
.item .img1{
width: 100%;
height: auto;
transition: all 1s ease-in-out 0s;
}
.item:hover .img1{
transform: rotateY(-90deg);
transition: all 1s ease-in-out 0s;
}
.line_item .img2{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
text-align: center;
background: url("../img/line11.jpg");
background-size: 100% auto;
transform: rotateY(-90deg);
transition: all 1s ease-in-out 0s;
}
.item:hover .img2{
transform: rotateY(0);
transition: all 1s ease-in-out 0s;
}
</style>
</head>
<body>
<div class="item">
<div class="img1">
<img src="../" alt=""><!-- 此处保存的是最开始屏幕上显示的图片 -->
</div>
<div class="img2"></div><!-- 此处决定鼠标hover时要翻转过来的图片 -->
</div>
</body>
</html>其实就是利用了css3中的transform：rotateY（），让其在在Y方向上翻转，0deg不翻转，即正常显示；-90deg就是右手并拢大拇指向上，即Y方向（就是平常夸人厉害的动作），四指就是翻转方向。