css 图片翻转

作者：残情弑天发布日期:2025-10-15 浏览:66

/* 使用 CSS 实现图片翻转效果 */

/* 水平翻转 */
.flip-horizontal {
  transform: scaleX(-1);
}

/* 垂直翻转 */
.flip-vertical {
  transform: scaleY(-1);
}

/* 示例 HTML 代码 */
/*
<img src="example.jpg" class="flip-horizontal">
<img src="example.jpg" class="flip-vertical">
*/

/* 解释说明：
- `transform: scaleX(-1);`：将元素沿水平方向翻转。
- `transform: scaleY(-1);`：将元素沿垂直方向翻转。
- 可以通过给 `<img>` 标签添加相应的类名来应用这些样式，实现图片的翻转效果。
*/

上一篇：gap css

下一篇：css background:背景图片拉伸铺满