CSS transform 实现镜像翻转图片

背景

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

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

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

代码片断

方案一

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

方案二

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

方案三

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

标签: CSS
最后更新:2023-02-12 13:12:37

相关小抄