CSS transform 实现镜像翻转图片
背景
有时,我们拿到的图片素材与我们期望的方向刚好相反,或者我们想用同一张图片素材实现正反两个方向的效果。这时就需要用到 CSS 翻转图片的技巧(把 👉
显示为 👈
)。
注意,是把图片进行镜像翻转,而不是让图片围绕中心点旋转。
其实这个技巧不仅只对图片有用,对其他元素也同样有效。
代码片断
方案一
/* 水平镜像翻转 */
.flip-horizontally {
transform: scaleX(-1);
}
/* 垂直镜像翻转 */
.flip-vertical {
transform: scaleY(-1);
}
方案二
/* 水平镜像翻转 */
.flip-horizontally {
transform: rotateY(180deg);
}
/* 垂直镜像翻转 */
.flip-vertical {
transform: rotateX(180deg);
}
方案三
还可以用矩阵变换来实现。算了,太麻烦了,不写了。