首先，上传一下最终效果：
接下来，我们按照结构来实现当前的demo效果：
第一步，创建一个触发hover效果的容器，并设置3d距离：
<!--item 可以触发翻转的区域-->
<div class="item">
...
</div>
设置.item的perspective属性距离，就是3d效果的z轴距离，浏览器默认就xy两个轴向，css3增加了z轴，就是当前2d平面的3d距离，单位是像素。我们在这里设置了3d距离是perspective:500px;
第二步，创建了翻转的容器，里面放置了显示正面内容和背面内容的div
<!--box 可以翻转的容器-->
<div class="box">
<!--font 默认显示的正面-->
<div class="font">正面</div>
<!--back 背面-->
<div class="back">背面</div>
</div>
.box作为翻转的容器，我们需要通过css将其转换为3d翻转样式，并设置了变换时间为1秒：
transition:all 1s;
transform-style: preserve-3d;
并在鼠标悬停在.item上面的时候，让.box沿y轴翻转180度：
.item:hover .box{
transform: rotateY(180deg);
}
实现到这里以后，我们基本就实现了可以翻转，接下来还要实现盒子里面正反面都有内容。
第三部，实现正反面的div，重点是设置背面不可见
<!--font 默认显示的正面-->
<div class="font">正面</div>
<!--back 背面-->
<div class="back">背面</div>
做第二步的时候，我们也可以发现，在翻转的div .box内创建了两个div 正面一个背面一个，首先我们把这两个盒子都设置绝对定位，两个盒子都设置翻转盒子的宽高
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
text-align: center;
line-height: 200px;
接下来重点来了，我们如何设置翻转以后，让盒子在背面不可见（默认盒子翻转以后还是可见的），需要用到css属性backface-visibility，我们将其设置一下：
backface-visibility: hidden;
还有最后一步，就是让.back的div默认反向显示，只需要让其沿y轴旋转180度即可：
.back{
transform: rotateY(180deg);
}
这样，就完成了一个翻转的案例，下面放上全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3d翻转</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.item{
width:200px;
height:200px;
perspective:500px;
}
.box{
background: #abb9c5;
width:100%;
height:100%;
transition:all 1s;
transform-style: preserve-3d;
position: relative;
}
.item:hover .box{
transform: rotateY(180deg);
}
.font, .back{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
text-align: center;
line-height: 200px;
backface-visibility: hidden;
}
.back{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<!--item 可以触发翻转的区域-->
<div class="item">
<!--box 可以翻转的容器-->
<div class="box">
<!--font 默认显示的正面-->
<div class="font">正面</div>
<!--back 背面-->
<div class="back">背面</div>
</div>
</div>
</body>
</html>
