3D陰影實(shí)例效果展示
代碼展示：
[html]
<div class="product"></div>
[css]
.product {
? ? transition: .2s;
? ? /*設(shè)置動(dòng)畫(huà)時(shí)長(zhǎng)*/
}
.product:hover {
?? transform: translate3d(0, -2px, 0);
?? /*定義3D轉(zhuǎn)換孵淘，只使用Y軸的值瘩扼，向上移動(dòng)兩個(gè)像素*/
?? 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轉(zhuǎn)換漓滔，只使用Y軸的值编饺，向上移動(dòng)兩個(gè)像素*/
這一句也可以寫(xiě)成：
transform: translate(0, -2px);
translate3d 和 translate的區(qū)別是translate3d可以啟動(dòng)GPU硬件加速，來(lái)提升網(wǎng)站動(dòng)畫(huà)渲染性能响驴。
