CSS下镜像翻转（水平/垂直翻转）

我们都只 CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。

CSS 的 rotate() 函数定义了一种将元素围绕一个定点（由 transform-origin 属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。旋转 180° 也被称为点反射。

角度 angle 指定了 rotate() 的旋转程度。参数为正时，顺时针旋转；参数为负时，逆时针旋转。180° 旋转称为点反演。

今天我们了解 scaleX(-1) 水平翻转图像和 scaleY(-1) 垂直翻转图像的用法。

水平翻转

要在 CSS 中给图片设置镜像效果，您可以使用 transform 属性的 scaleX(-1) 值。这将水平翻转图像，创建镜像效果。

以下是一个简单的示例：

.mirror-image {
    transform: scaleX(-1); // 或者 rotateY(180deg)
}

scaleX() CSS 函数将每个元素点的横坐标修改为一个常数因子，除了该比例因子为 1，在这种情况下，函数是身份变换。缩放不是各向同性的，并且元素的角度不保守。

scaleX(-1) 定义一个 轴向对称性 (axial symmetry) ，它具有一个垂直轴通过原点 (由 transform-origin 属性规定)。

rotateY() 函数定义了一个转换，它可以让一个元素围绕纵坐标 (垂直轴) 旋转，而不会对其进行变形。它的结果是一个 transform-function 数据类型。

垂直翻转

您可以使用 transform 属性的 scaleY(-1) 值。这将垂直翻转图像，创建镜像效果。

以下是一个简单的示例：

.mirror-image {
    transform: scaleY(-1); // 或者 rotateX(180deg)
}

CSS 函数 scaleY() 定义沿 y 轴（垂直）调整元素大小的转换。

rotateX() 函数定义了一个转换，它可以让一个元素围绕横坐标 (水平轴) 旋转，而不会对其进行变形。它的结果是一个 transform-function 数据类型。