使用css写一个垂直翻转图片的效果

.flipped-image {
  transform: scaleY(-1); /*  Vertically flips the image */
}

This CSS code snippet uses the transform property with the scaleY(-1) function. scaleY() scales the element vertically. A value of -1 flips it vertically.

How to use it:

1. HTML: Add the flipped-image class to the image element you want to flip:

   <img src="your-image.jpg" alt="Your Image" class="flipped-image">
   

2. CSS: Include the CSS snippet in your stylesheet or within a <style> tag in your HTML document.

That's it! The image with the class flipped-image will be displayed upside down.

Alternative using rotate (for 180-degree flip):

While scaleY(-1) is generally preferred for vertical flips, you can also achieve a 180-degree rotation (which also flips the image vertically) using rotate:

.rotated-image {
  transform: rotate(180deg);
}

This rotates the image 180 degrees around its center point. The result is visually the same as a vertical flip, but it's technically a rotation. Keep in mind that this also rotates the image horizontally.

Choosing the right method:

• For a pure vertical flip, scaleY(-1) is the more semantically correct and performant option.
• If you need a 180-degree rotation (both vertical and horizontal flip), use rotate(180deg).

This explanation should help you choose the best approach for your specific needs. Remember to replace "your-image.jpg" with the actual path to your image file.