前言
CSS效果看多了，这次带大家来体验一个CSS属性——反射属性，这个属性相对比较冷门，但是还是可以去了解一下的。毕竟它能出现，就有它存在的道理。
效果预览
反射属性介绍
这里给大家介绍一下反射属性。CSS中的反射属性是一种用于创建图像或文本的镜像效果的CSS属性。它可以通过将元素的内容在其下方创建一个镜像来实现反射的效果。通过使用这些反射属性，可以为元素创建各种不同的镜像效果。例如，可以将一个图片元素的内容在其下方创建一个镜像，从而实现水平翻转的效果。简单来说就是达到一种镜面反射的效果。
实现部分
接下来将该反射属性给大家应用到真正的效果上。
首先是HTML部分。
<div class="container">
<img src="图片地址" alt="" width="40%" height="20%">
</div>
它包含一个div元素和一个img元素，这些就不用过多介绍了，都是最基础的元素。需要注意的是，如果src属性为空，这个img元素不会显示任何图像。如果要显示图像，必须在src属性中提供正确的图像路径。
然后是CSS部分。
.container{
width: 1100px;
display: flex;
justify-content: space-between;
}
这里定义了一个容器 （container），设置容器的宽度为1100像素，并将容器设置为flex布局，使其内部的元素能够灵活地排列。
接下来是图片的样式。
.container img{
max-width: 350px;
transform-origin: center;
transform: perspective(800px) rotateY(20deg);
transition: 0.5s;
-webkit-box-reflect: below 1px linear-gradient(transparent,transparent,#0004);
}
.container:hover img{
opacity: 0.1;
}
.container img:hover{
transform: perspective(800px) rotateY(0deg);
opacity: 1;
}
这里是来实现一个图片容器的效果。首先，.container img选择器用来选择容器中的图片元素。然后，max-width属性限制图片的最大宽度为350像素。transform-origin属性设置变换的中心点为元素的中心。transform属性使用3D透视变换，让图片绕Y轴旋转20度。transition属性设置变换的过渡时间为0.5秒。-webkit-box-reflect属性创建了一个镜像效果，使图片底部有一个透明的渐变效果。
接下来，.container:hover img选择器用来设置当鼠标悬停在容器上时，图片的样式。opacity属性设置图片的透明度为0.1，使图片变得半透明。
最后，.container img:hover选择器用来设置当鼠标悬停在图片上时的样式。transform属性将图片的旋转角度恢复为0，使其回到原始位置。opacity属性将图片的透明度恢复为1，使其完全可见。这样当鼠标悬停在图片上时，图片会恢复到原始状态并变得完全可见。
总的来说，就是创建好一个容器，并在容器中放置一个图片。并且通过transform属性设置了一个3D旋转效果 （perspective(800px) rotateY(20deg)），同时还设置了一个0.5秒的过渡效果 （transition: 0.5s）。
关键部分就是通过-webkit-box-reflect属性，添加了一个在图片下方的倒影效果。当鼠标悬停在容器上时，图片的透明度将变为0.1，当鼠标悬浮在图片上时，图片将还原为初始状态 （perspective(800px) rotateY(0deg)） 并透明度变为1。
总结
以上就是整个效果的实现过程了，完整代码大家可以去码上掘金里查看。虽然该属性平时开发中不常见，但是我觉得总会有用的到的时候。有句话说的好，书到用时方恨少，因此多掌握一个CSS样式也可以算是自己能力上的一种提升，欢迎大家去学习，也欢迎大家在评论区里交流。
