CSS中圖片中間翻轉(zhuǎn)是一種常用的效果，它可以使頁面更加生動、有趣，吸引用戶的眼球。

下面是一個簡單的例子：

.flip-box {
background-color: transparent;
perspective: 1000px;
}
.flip-box-inner {
border-radius: 50%;
position: relative;
width: 200px;
height: 200px;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: #555;
color: white;
transform: rotateY(180deg);
}

首先，我們需要創(chuàng)建一個外層容器，并設(shè)置其透明背景和透視距離。

接下來，我們創(chuàng)建一個內(nèi)層容器，并設(shè)置其為相對定位、圓形、3D保持，并添加變換過渡效果。在鼠標(biāo)懸停時，我們將其旋轉(zhuǎn)180度。

然后，我們分別創(chuàng)建正面和反面容器，并設(shè)置相對定位、寬高為100%、背面隱藏。給正面設(shè)置背景顏色和文字顏色，給反面設(shè)置不同的背景顏色，文字顏色和旋轉(zhuǎn)角度。

最后，將正反面容器放入內(nèi)層容器中即可。

完整的HTML代碼如下：

<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>正面</h2>
</div>
<div class="flip-box-back">
<h2>反面</h2>
</div>
</div>
</div>

試試吧，你也可以使用CSS創(chuàng)建出炫酷的圖片翻轉(zhuǎn)效果！