css：倒影倾斜效果

这是需要实现的效果，平时用的比较多的是添加阴影，是box-shadow，而添加倒影是box-reflect，需要注意的是box-reflect需要添加浏览器前缀，比如我用的谷歌浏览器，要加-webkit-才能生效。

-webkit-box-reflect: below 3px linear-gradient(to bottom,
				transparent 90%,
				rgba(0, 0, 0, 0.3) 100%
			);
		/* 参数说明：
		     below - 倒影方向（下方）
		     0px   - 倒影与图片的间距
		     linear-gradient - 渐变遮罩（使倒影渐隐）
		  */

倒影需要注意的是渐变设置，由于倒影是倒过来的，所以上面是bottom，下面是top，如下图所示。0-90%都是透明色，然后90%-100%从透明色渐变成半透明色，遮罩在图片倒影上。 

如果不设置渐变，那么就是整个倒影全部显示出来的。

 3d倾斜样式，要现在图片容器上增加透视效果，perspective: 1000px; 

然后图片设置transform: translate3d(0px, 0px, -10px) rotateX(0deg) rotateY(30deg) scale(1);

再添加一点动效，比如鼠标hover的时候，图片回正，transform: none;

想要动效更流畅，又加了transition: transform 1s linear;

但是加了transition后悲催的发现，图片旋转回正后会有视觉残留，360浏览器无此问题而谷歌浏览器有，查了一圈资料，加浏览器前缀-webkit-，加

backface-visibility: hidden;
backface-visibility: hidden;
transform-style: preserve-3d;
will-change: transform;

一概不管用。

完整代码如下，如果有网友解决了谷歌浏览器视觉残留问题，麻烦给我留个言，非常感谢了。

<template>
	<!-- 倒影案例 -->
	<div class="container">
		<img src="../assets/1.png" />
		<img src="../assets/2.png" />
	</div>
</template>

<script>
</script>

<style scoped>
	.container {
		padding: 50px;
		display: flex;
		justify-content: space-around;		/* 图片左右分布 */
		perspective: 1000px; 		/* 增加3D透视效果 */
	}
	.container img {
		width: 40%;
		height: 300px;
		border-radius: 10px;
		-webkit-box-reflect: below 3px linear-gradient(to bottom,
				transparent 90%,
				rgba(0, 0, 0, 0.3) 100%
			);
		/* 参数说明：
		     below - 倒影方向（下方）
		     0px   - 倒影与图片的间距
		     linear-gradient - 渐变遮罩（使倒影渐隐）
		  */
		transition: transform 1s linear; /*加transition在谷歌浏览器上会有视觉残留问题*/
	}
	
	/* 图片容器里要设置perspective，子元素的translate3d才能生效*/
	/* 第一张图片往右倾斜 */
	.container img:nth-child(1) {
		transform: translate3d(0px, 0px, -10px) rotateX(0deg) rotateY(30deg) scale(1);
	}
	
	/* 第二张图片往左倾斜 */
	.container img:nth-child(2) {
		transform: translate3d(0px, 0px, -10px) rotateX(0deg) rotateY(-30deg) scale(1);
	}
	.container img:nth-child(1):hover {
		transform: none;
	}
	.container img:nth-child(2):hover {
		transform: none;
	}
	
</style>