CSS 图片翻转是许多网站设计中常见的效果之一，它可以让图片在不改变其原始方向的情况下，呈现出不同的视觉效果。介绍如何使用 CSS 翻转图片，以及如何通过不同的方式实现不同的翻转效果。
一、使用 transform 属性翻转图片
使用 transform 属性是最简单的翻转图片的方法之一。该属性可以通过设置 rotateX、rotateY、rotateZ 等参数来实现不同的翻转效果。具体实现方法如下：
1. 使用 rotateX 翻转图片
rotateX 可以实现沿着 X 轴翻转图片，使图片从上到下翻转。具体实现代码如下：
.flip-x {
transform: rotateX(180deg);
2. 使用 rotateY 翻转图片
rotateY 可以实现沿着 Y 轴翻转图片，使图片从左到右翻转。具体实现代码如下：
.flip-y {
transform: rotateY(180deg);
3. 使用 rotateZ 翻转图片
rotateZ 可以实现沿着 Z 轴翻转图片，使图片顺时针或逆时针旋转。具体实现代码如下：
.flip-z {
transform: rotateZ(180deg);
二、使用 scale 属性翻转图片
除了使用 transform 属性外，还可以使用 scale 属性来翻转图片。scale 属性可以通过设置 scaleX、scaleY 参数来实现不同的翻转效果。具体实现方法如下：
1. 使用 scaleX 翻转图片
scaleX 可以实现沿着 X 轴翻转图片，使图片水平翻转。具体实现代码如下：
.flip-x {
transform: scaleX(-1);
2. 使用 scaleY 翻转图片
scaleY 可以实现沿着 Y 轴翻转图片，使图片垂直翻转。具体实现代码如下：
.flip-y {
transform: scaleY(-1);
三、使用 CSS3 动画翻转图片
除了使用 transform 和 scale 属性外，还可以使用 CSS3 动画来实现图片的翻转效果。具体实现方法如下：
1. 使用 @keyframes 实现图片翻转
使用 @keyframes 可以实现图片在一定时间内从一个状态平滑地过渡到另一个状态。具体实现代码如下：
.flip-x {
animation: flip-x 1s ease-in-out;
@keyframes flip-x {
0% {
transform: perspective(400px) rotateX(0deg);
}
100% {
transform: perspective(400px) rotateX(180deg);
}
2. 使用 transition 实现图片翻转
使用 transition 可以实现图片在鼠标悬停时平滑地翻转。具体实现代码如下：
.flip-x {
transition: transform 1s ease-in-out;
.flip-x:hover {
transform: rotateX(180deg);
四、
使用 transform、scale、@keyframes 和 transition 四种方法来实现图片翻转效果。其中，使用 transform 和 scale 属性是最简单的方法，而使用 CSS3 动画可以实现更加复杂的翻转效果。使用 transition 可以实现在鼠标悬停时平滑地翻转图片。不同的方法可以根据具体需求来选择使用，以实现的视觉效果。
// 来源：https://www.nzw6.com
