1. 效果图
鼠标未放在图片上时显示图片，鼠标悬停在任意一副图片上时图片翻转，显示文字
2. 思路
设置四个父层div标签，每个父层div包含图片和文字，舞台div表标签包含四个父层div标签。
这里的主要问题是图片盒子和文字盒子的摆放问题，一开始显示的是图片，翻转后是文字，因此我们让图片盒子和文字盒子重叠在一起，图片盒子在上层，文字盒子在下一层，如何使两张图片重合在一起呢？我们设置父层div为相对定位，子层图片和文字盒子为绝对定位，定位的上下左右属性四个方向值不设定默认为0，这样可以实现两个盒子的重叠。
那么如何实现图片在上盒子在下呢？在两个盒子重叠后，我们对文字盒子使用一个翻转功能，这里需要注意在父层div内图片盒子先写在前，文字盒子写在后，这样的话对文字实现一个翻转后它就跑到图片盒子下面，实现了图片在上文字在下后，再对包含图片和文字的盒子使用一个翻转功能，即可实现上述功能，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color:#0D3462;
}
/*舞台*/
#piclist{
width:760px; /*170*4+10*8*/
height: 220px;/*190+边框*/
margin: 100px auto;
}
/*容器*/
.picbox{
float: left;
position: relative;
width: 170px;
height: 190px;
margin: 10px;
/*3d——双面效果*/
transform-style:preserve-3d;
transition:1.5s;
}
/*舞台鼠标悬停，就翻转，
正面背面互换*/
.picbox:hover{
transform:rotateY(180deg);
}
.face{
position: absolute;
width:170px;
height:190px;
}
.front{
border:2px solid #4b2518;
}
.back{
/*让它成为背面，开始只显示正面*/
transform:rotateY(180deg);
background-color: #4b2518;
border:2px solid #fff;
}
.back h3{
color:white;
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<div id="piclist">
<div class="picbox">
<div class="face front"><img src="images/1.jpg"></div>
<div class="face back"><h3>浓缩咖啡</h3></div>
</div>
<div class="picbox">
<div class="face front"><img src="images/2.jpg"></div>
<div class="face back"><h3>卡布奇诺</h3></div>
</div>
<div class="picbox">
<div class="face front"><img src="images/3.jpg"></div>
<div class="face back"><h3>拿铁</h3></div>
</div>
<div class="picbox">
<div class="face front"><img src="images/4.jpg"></div>
<div class="face back"><h3>摩卡</h3></div>
</div>
</div>
</div>
</body>
</html>那么如果在父层div内，文字写在前，图片写在后，不对文字使用翻转，这样也能使图片在上层，文字在下层，但是经过测试，这里鼠标悬停在图片上翻转还是图片，文字不见了，但若对在下层的文字使用翻转，这样却是可行的，这里推测的解释是如果不对下面的图层进行一定的操作，那么在同一个父容器内写在后面的盒子会覆盖掉前面的盒子，
