CSS 圖片翻轉是前端開發中常用的效果之一。但是，不同瀏覽器對于 CSS 屬性的解析存在一定的差異，因此需要編寫兼容各種瀏覽器的代碼。 圖片翻轉是常用的效果之一，利用 CSS 中的 transform 屬性可以輕松實現。其中，包括了 scaleX、scaleY、rotateX 和 rotateY 等屬性。具體實現代碼如下所示：

img:hover {
-webkit-transform: scale(-1, 1); /* Safari */
transform: scale(-1, 1); /* Standard syntax */
}

這段代碼實現了水平翻轉的效果，img:hover 表示將鼠標移動到圖片上時觸發，-webkit-transform 表示在 Safari 瀏覽器中執行此效果，而 transform 表示在其他瀏覽器中執行。其中，scale(-1, 1) 表示 x 軸方向翻轉，-1 代表反向，1 代表不變。 同樣，可以把 y 軸方向翻轉，實現效果如下：

img:hover {
-webkit-transform: scale(1, -1); /* Safari */
transform: scale(1, -1); /* Standard syntax */
}

以上代碼如何適用不同瀏覽器呢？可以采用如下方式：

img:hover {
-webkit-transform: scaleX(-1); /* Safari */
-moz-transform: scaleX(-1); /* Firefox */
-ms-transform: scaleX(-1); /* IE 9 */
-o-transform: scaleX(-1); /* Opera */
transform: scaleX(-1); /* Standard syntax */
}

其中，-moz-transform、-ms-transform 和 -o-transform 分別表示 Firefox、IE9 和 Opera 瀏覽器，而 Standard syntax 表示其他瀏覽器。這種方式可以使得代碼更加兼容。