说到图片翻转，我们想一下可以知道主要使用的是CSS中的2D转换。2D转换的主要方法有：
- translate(x,y):将元素从当前位置移动到指定位置；
- rotate():将元素顺时针或逆时针转动；
- scale():改变元素的尺寸；例如：scale(2,4)是把宽度转换为原来尺寸的2倍，高度转换成原来尺寸的4倍。
- skew():将元素翻转一定的角度；
- matrix():把所有的2D转换方法组合在一起；
这次CSS案例需要达成的效果：
在网页中有两张图片，两张图片一开始是重合在一起的(如图1-1)，当鼠标悬停在最上面的图片上时，显示下方的图片(如图1-2)，鼠标移开后显示上方的图片。
1-2
1-1
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS图片翻转</title>
<style>
div{
width:162px;
height:74px;
border:1px solid #000000;
position:relative;
}
img{
position:absolute;
top:0px;
left:0px;
backface-visibility:hidden;/*设置元素背面不可见*/
}
.pic2{
transform:rotateY(-180deg);
}
div:hover .pic1{
transform:rotateY(-180deg);
}
div:hover .pic2{
transform:rotateY(0deg);
}
</style>
</head>
<body>
<div>
<img class="pic1" src="img/health.jpg" alt="美容&健康"/>
<img class="pic2" src="img/health_copy" alt="美容&健康"/>
</div>
</body>
</html>
1179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
