CSS實(shí)現(xiàn)倒影效果的方法

在CSS中，我們可以使用transform屬性來(lái)實(shí)現(xiàn)倒影效果，以下是一個(gè)簡(jiǎn)單的示例：

HTML代碼：

<div class="mirror">
  <div class="image">
    <img src="image.jpg" alt="Image">
  </div>
  <div class="reflection">
    <img src="image.jpg" alt="Reflection">
  </div>
</div>

CSS代碼：

.mirror {
  position: relative;
  width: 300px;
  height: 200px;
}
.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.reflection {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為mirror的容器，其中包含了兩個(gè)子元素：image和reflection。image元素用于顯示原始圖像，而reflection元素則用于顯示倒影，通過(guò)transform屬性中的scaleX(-1)函數(shù)，我們可以將reflection元素的水平方向翻轉(zhuǎn)，從而實(shí)現(xiàn)倒影效果。