css图片翻转

作者：若此生已赞。发布日期:2026-03-28 浏览:88

/* CSS 图片翻转示例代码 */

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

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

/* 水平和垂直同时翻转 */
.flip-both {
  transform: scale(-1, -1);
}

解释说明：

transform: scaleX(-1);：将元素沿水平轴翻转。scaleX(-1)表示在 X 轴方向上缩放为原来的 -1 倍，即水平翻转。
transform: scaleY(-1);：将元素沿垂直轴翻转。scaleY(-1)表示在 Y 轴方向上缩放为原来的 -1 倍，即垂直翻转。
transform: scale(-1, -1);：同时沿水平和垂直轴翻转。scale(-1, -1)表示在 X 和 Y 轴方向上都缩放为原来的 -1 倍，即同时水平和垂直翻转。

你可以将这些样式应用到图片或其他 HTML 元素上，实现不同的翻转效果。

上一篇：css过渡动画

下一篇：css 字体斜体