3D阴影实例效果展示
代码展示：
[html]
<div class="product"></div>
[css]
.product {
transition: .2s;
/*设置动画时长*/
}
.product:hover {
transform: translate3d(0, -2px, 0);
/*定义3D转换，只使用Y轴的值，向上移动两个像素*/
box-shadow: 0 17px 40px 0 rgba(0, 0, 0, .19);
/*添加阴影，水平阴影位置为0；垂直阴影位置为17px；模糊距离40px；阴影的尺寸0；颜色为rgba(0, 0, 0, .19)*/
}
Tips：
transform: translate3d(0, -2px, 0);
/*定义3D转换，只使用Y轴的值，向上移动两个像素*/
这一句也可以写成：
transform: translate(0, -2px);
translate3d 和 translate的区别是translate3d可以启动GPU硬件加速，来提升网站动画渲染性能。
