CSS3的翻轉背面效果是指通過CSS3轉換屬性實現網頁元素在鼠標懸停的時候自動翻轉，展現元素的背面內容。這個效果經常被用于產品展示，實現鼠標懸停時產品的詳情功能。

實現翻轉背面的關鍵在于CSS3的transform屬性，以及perspective和backface-visibility屬性的配合使用。其中，perspective屬性定義元素的視距，backface-visibility屬性定義當元素翻轉時，背面是否可見。

接下來我們來看一個例子。下面的盒子在鼠標懸停時會自動翻轉，展現盒子的背面。我們使用了兩個子元素，一個代表盒子的正面，一個代表盒子的背面。在鼠標懸停時我們分別使用CSS3的rotateY屬性對它們進行旋轉。

<div class="box">
<div class="front"></div>
<div class="back"></div>
</div>

.box {
width: 200px;
height: 200px;
background: #F4A460;
position: relative;
perspective: 1000px;
}
.box:hover .front {
transform: rotateY(-180deg);
}
.box:hover .back {
transform: rotateY(0);
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
transition: transform 1s;
backface-visibility: hidden;
}
.front {
z-index: 2;
}
.back {
transform: rotateY(180deg);
background: #87CEFA;
}