CSS實現div翻轉顯示非常簡單，只需要利用CSS3的transform屬性和transition屬性就可以了。

.front{
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.back{
position: absolute;
top: 0;
left: 0;
transform: rotateY(180deg);
transform-style: preserve-3d;
transition: transform 1s;
}
.front:hover{
transform: rotateY(180deg);
}
.back:hover{
transform: rotateY(0deg);
}

以上代碼分別定義了兩個div，即front和back，其中front是正面，back是背面。首先要給front設置position:relative和transform-style:preserve-3d屬性，這個屬性是必須的，用來讓子元素的3D效果能夠生效。

然后在back元素中設置position:absolute、top、left等屬性，這些屬性是為了讓back元素重疊在front元素上方，并且水平翻轉180度。同時需要給back設置transition:transform 1s屬性，這樣才能產生翻轉效果的平滑過渡。

接著是設置鼠標懸停時的效果。當鼠標懸停在front元素上時，通過設置transform:rotateY(180deg)來實現翻轉效果。同樣的，當鼠標懸停在back元素上時，通過設置transform:rotateY(0deg)來使背景元素恢復到正面狀態。

最后需要注意的是，以上代碼只能在支持CSS3的瀏覽器中才能正常顯示，如果需要給不支持CSS3的瀏覽器提供兼容性支持，可以采用JavaScript等技術手段來實現相同效果。