如何用css实现倒影效果

在电商和产品广告中，我们经常看到水中倒影的效果，其实这种效果我们也可以通过css来实现。并且这种效果也是通过css的几种属性来实现。

几种属性如下：

1.perspective：

多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。

2.transform：

transform-style：preserve-3d ：让转换的子元素保留3D转换

transform-origin：设置旋转元素的基点位置

translate(x, y) ：定义2d图形的转换，分别为 x 和 y

roate(90deg) : 定义2d图形的旋转，参数为度数，如旋转90度

3.box-reflect：

倒影属性，这个效果非常的奇特，包括三个属性

direction：定义倒影的方向。

offset：定义反射偏移的距离，取值包括数值或百分比，其中百分比根据对象的尺寸进行确定。默认为0

mask-box-image 定义遮罩图像，该图像将覆盖投影区域。

4.animation :

动画属性，可连贯的书写，也可分开书写(前面加上animation-)

具体实现可以参考以下代码：

HTML部分

<div class=“style”>
      <h1>这里是倒影效果</h1>
 </div>

CSS部分

.style {
        padding-top: 100px;
}
.style h1 {
     font-size: 50px;
     text-align: center;
     color: rebeccapurple;
     -webkit-box-reflect: below 1px linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
}