在網頁設計中，css樣式是非常重要的一種元素。它可以美化并且提高網頁的交互性。圖片翻轉樣式是其中一種比較常見的樣式，可以使圖片在鼠標移入時翻轉，并且翻轉后顯示相應的內容。

首先需要在html中嵌入一張圖片：

<div class="image">
<img src="example.jpg">
</div>

在css中我們需要通過transform屬性設置軸心點，同時添加hover屬性，當鼠標移入時翻轉圖片：

.image {
perspective: 1000px;
}
.image img {
transition: transform .5s;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.image:hover img {
transform: rotateY(180deg);
}

上述代碼中，perspective屬性用于設置3D場景中的觀察者距離元素的距離。transition屬性用于設置過渡效果，transform-style屬性用于指定變形屬性如何在3D空間中呈現，backface-visibility屬性用于指定在翻轉過程中表面的可見性。hover屬性用于在鼠標移入時觸發樣式更改，transform屬性用于設置圖片旋轉的角度。

使用上述代碼即可實現一張圖片的翻轉功能。相應的內容可以添加至另一面圖片中，當圖片翻轉時該內容即可顯示。