在網頁設計中，經常需要使用圖片作為配圖，而圖片也是可以瀏覽器中使用的元素之一。

在使用圖片的過程中，我們有時會需要對其進行翻轉，這就需要使用CSS指向圖片翻轉的技術。

下面是一個例子：

在上面的代碼中，我們首先創建了一個名為“flip-box”的div元素，并為其添加了CSS樣式，使其具備了翻轉的效果。

在“flip-box”元素內部，我們創建了一個名為“flip-box-inner”的div，并為其添加了“transform-style: preserve-3d”的樣式。這是必要的，因為只有添加了該樣式，才能夠使子元素的變換與其父元素一致，從而實現翻轉的效果。

接下來，我們在“flip-box-inner”元素內部創建了兩個div，分別命名為“flip-box-front”和“flip-box-back”。

“flip-box-front”中包含了一張名為“front-image.jpg”的圖片，表示翻轉前的狀態；而“flip-box-back”中包含了一張名為“back-image.jpg”的圖片，表示翻轉后的狀態。

接下來，在鼠標懸停在“flip-box”元素上方時，我們使用CSS:hover屬性為“flip-box-inner”元素添加“transform: rotateY(180deg)”樣式，使其繞Y軸旋轉180度，從而達到圖片翻轉的效果。