CSS 图像变换翻转镜像 - CSS

本文介绍了如何使用 CSS 进行图像的翻转和镜像效果。

1. 翻转效果

1.1 水平翻转

如果想让图像水平翻转，可以使用 transform 属性的 scaleX 值为 -1。

.flip-horizontal {
  transform: scaleX(-1);
}

1.2 垂直翻转

如果想让图像垂直翻转，可以使用 transform 属性的 scaleY 值为 -1。

.flip-vertical {
  transform: scaleY(-1);
}

1.3 任意角度翻转

如果想对图像进行任意角度的翻转，可以使用 transform 属性的 rotate 值。

.flip-angle {
  transform: rotate(180deg);
}

2. 镜像效果

2.1 水平镜像

如果想让图像水平镜像，可以使用 transform 属性的 scaleX 值为 -1，配合 transform-origin 属性来控制镜像的起始位置。

.mirror-horizontal {
  transform: scaleX(-1);
  transform-origin: 50% 50%;
}

2.2 垂直镜像

如果想让图像垂直镜像，可以使用 transform 属性的 scaleY 值为 -1，配合 transform-origin 属性来控制镜像的起始位置。

.mirror-vertical {
  transform: scaleY(-1);
  transform-origin: 50% 50%;
}

2.3 任意角度镜像

如果想对图像进行任意角度的镜像，可以使用 transform 属性的 scale 值，配合 transform-origin 属性来控制镜像的起始位置。

.mirror-angle {
  transform: scale(-1, 1);
  transform-origin: 50% 50%;
}

以上是使用 CSS 进行图像变换翻转和镜像的方法。通过调整属性值和配合其他样式，还可以实现更多有趣的效果。请根据实际需求进行调整和尝试。