首先，上傳一下最終效果：
接下來，我們按照結構來實現當前的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>
