hover3d.js是一款效果超酷的滑鼠滑過圖片3D卡片效果jQuery插件。通過該插件可以製作出滑鼠滑過圖片時,圖片3D傾斜,旋轉的效果,非常有層次感。 使用該jQuery插件需要在頁面中引入jquery和jquery.hover3d.min.js文件 該滑鼠滑過圖片效果的HTML結構如下:包裹元
hover3d.js是一款效果超酷的滑鼠滑過圖片3D卡片效果jQuery插件。通過該插件可以製作出滑鼠滑過圖片時,圖片3D傾斜,旋轉的效果,非常有層次感。
使用方法
使用該jQuery插件需要在頁面中引入jquery和jquery.hover3d.min.js文件
<script src="src/jquery.min.js"></script> <script src="src/jquery.hover3d.min.js"></script>
HTML結構
該滑鼠滑過圖片效果的HTML結構如下:包裹元素和它裡面的子元素將被之後為3D卡片效果。
<div class="project"> <div class="project__card"> <!-- Content element goes here --> </div> </div>
CSS樣式
該特效不需要特別的CSS樣式,你可以指定自己的CSS樣式。但是你可以為滑鼠滑入和滑出圖片時添加下麵的輔助class類。
/* This class can be replaced using options */ .hover-in{ transition: .3s ease-out; } .hover-out{ transition: .3s ease-in; }