正反面的实现

《HTML》

<div class="content">
<div class="translate">
<div class="front">
<p>吃</p>
</div>
<!-- 反面 --><!-- background-size设置背景图的大小 值为contain时 同比例缩放图片大小 -->
<div class="back">
<p>背面</p>
</div>
</div>
<div class="translate">
<!-- 正面 -->
<div class="front">
<p>西</p>
</div>
<div class="back">
<p>背面</p>
</div>
</div>
<div class="translate">
<!-- 正面 -->
<div class="front">
<p>瓜</p>
</div>
<div class="back">
<p>背面</p>
</div>
</div>

《css》

.back {
background:url(../images/11.png) no-repeat;
background-size:300px 400px;
}
/*页面内容*/
.content {
perspective:1000px;
width: 1300px;
margin:0 auto;
}
/*包含正反面div*/
.translate {
width: 300px;
height: 300px;
border-radius: 50%;
margin-left:10px;
margin-bottom:120px;
display: inline-block;/*div横排显示，变成行级元素*/
cursor: pointer;
}
/*正面*/
.translate .front{
width: 300px;
height: 300px;
border-radius: 50%;
display: inline-block;
background-color: pink;
}
/*反面*/
.translate .back{
width: 300px;
height: 400px;
border-radius: 50%;
display: none;/*让背面先隐藏，不显示*/
}
/*正反面文字样式*/
.front p{
text-align: center;
font-size: 72px;
color:#fff;
line-height: 145px;
font-family: "隶书";
}
.back p{
text-align: center;
font-size: 72px;
line-height: 145px;
color:#fff;
opacity: 0;/*使背面的字为透明，不显示*/
font-family: "微软雅黑";
}

《js》

$(function(){
$(".translate").hover(function(){
$(this).css({"transform":"rotateY(180deg)","transition":"0.6s"});//沿着Y轴旋转180度,动画时间
//获取当前索引值，当前是哪个div
var n=$(this).index();
//将背面翻转过显示，将正面隐藏
$(".back").eq(n).css({"transform":"rotateY(180deg)","display":"inline-block"});
$(".front").eq(n).hide()
},function(){
$(this).css("transform","rotateY(0deg)");
//获取当前索引值，当前是哪个div
var n=$(this).index();
//将背面翻转过显示，将正面隐藏
$(".front").eq(n).css({"transform":"rotateY(360deg)","display":"inline-block"});
$(".back").eq(n).hide()
})
})