有一個 transform 屬性 CSS 標籤，能夠實現將圖片、文字、框架等，向水平方向反轉或垂直方向反轉，transform 標籤也有一大特點，允許你對元素進行旋轉、縮放、傾斜或翻譯。

X水平反轉（左右翻轉）
transform: translateX(-1);

Y垂直反轉（上下翻轉）
transform: translateY(-1);

X水平反轉（左右翻轉）
transform: scaleX(-1);

Y垂直反轉（上下翻轉）
transform: scaleY(-1);

原圖片：tinyjpg.com/images/social/website.jpg

示例一：將圖片沿 X 軸（水平方向）反轉

CSS:

.flip-horizontal {
	transform: scaleX(-1);
}

Html:

<img src="//tinyjpg.com/images/social/website.jpg" title="Image" class="flip-horizontal" />
<div class="flip-horizontal">
01. 我是文字貼!
</div>

示例二：將圖片沿 Y 軸（垂直方向）反轉

CSS:

.flip-vertical {
	transform: scaleY(-1);
}

Html:

<img src="//tinyjpg.com/images/social/website.jpg" title="Image" class="flip-vertical" />
<div class="flip-vertical">
02. 我是文字貼!
</div>

代碼測試︰ ifreesite.com/runcode.htm

技術文檔：使用純CSS3將圖片反轉