CSS transform 实现镜像翻转图片

背景

有时，我们拿到的图片素材与我们期望的方向刚好相反，或者我们想用同一张图片素材实现正反两个方向的效果。这时就需要用到 CSS 翻转图片的技巧（把 👉 显示为 👈）。

注意，是把图片进行镜像翻转，而不是让图片围绕中心点旋转。

其实这个技巧不仅只对图片有用，对其他元素也同样有效。

代码片断

方案一

/* 水平镜像翻转 */
.flip-horizontally { 
	transform: scaleX(-1);
}
/* 垂直镜像翻转 */
.flip-vertical {
	transform: scaleY(-1);
}

方案二

/* 水平镜像翻转 */
.flip-horizontally {
	transform: rotateY(180deg);
}
/* 垂直镜像翻转 */
.flip-vertical {
	transform: rotateX(180deg);
}

方案三

还可以用矩阵变换来实现。算了，太麻烦了，不写了。