实现的效果是当鼠标移动到一张图片是，就翻转过来显示另一个图片，柔如正反面一样。
核心属性：backface-visibility: hidden;
解读：当一个元素不是正面面对屏幕时就隐藏起来
解答疑难：可能最开始有人就这样想了，给一个div套上一个img标签，设置div的背景为另一个图片，然后翻转div就可以看到另一面了，但答案却是不可能，因为图片会盖住背景，所以无法实现
最终解决：
1、我们定义一个div，然后后里面包含两张图片，一个正面一个反面
<div>
<img src="img/icon2.png" alt="正面">
<img src="img/icon1.png" alt="反面">
</div>
2、利用绝对定位将两个图片定位在div上
section {
width: 200px;
height: 200px;
position: relative;
}
img {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
image.png
3、设置当鼠标移到div时，图片沿着Y轴进行翻转180度
div:hover img{
transform: rotateY(180deg);
}
因为鼠标移到上面时，下面那张图片依旧是在下面，上面那张图片也依旧在上面，只是都翻转了180度而已，此时就要用到我们的backface-visibility: hidden了，因为这两张图片都旋转了180度，所以我们可以给上面那张图片设置这个属性（注意：记住只给上面那张图片设置哦），让它不是正面面对屏幕时就隐藏起来
img:first-child {/*这张是在上面的图片*/
z-index: 2;/*因为图片中用了绝对定位，所以最后定位的图片会盖住最先定位的，设置这个属性是为了让它显示到最上面*/
backface-visibility: hidden;
}
参考代码（懒得去优化代码，自取哈）
<title>两面翻转</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 200px;
height: 200px;
position: relative;
margin: 80px auto;
}
img:first-child {
z-index: 2;
backface-visibility: hidden;
}
img {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
transition: all 2s;
}
div:hover img{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div>
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
</div>
</body>
