CSS3制作帶方向感應的鼠標滑過圖片3D動畫

本篇內容介紹了“CSS3制作帶方向感應的鼠標滑過圖片3D動畫”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

這是一款使用CSS3和一點JS來制作的炫酷帶方向感應的鼠標滑過圖片3D動畫特效。在特效中，當用戶的鼠標滑過網格中的圖片時，網格中的內容遮罩層會出現3D翻轉動畫，并且帶有方向感應，能夠從鼠標進入的方向開始翻轉，效果非常的酷。

在線預覽    源碼下載

使用方法

HTML結構

該方向感應鼠標滑過動畫的HTML結構采用無序列表的HTML結構來制作網格布局，每一個<li>元素是一個網格。每個網格中使用一個<svg>元素來進行占位，實際上它是一個圖片的小圖標。另外div.info是要進行3D翻轉的遮罩層。

XML/HTML Code復制內容到剪貼板

1. <div class='container'>  

2.   <ul>  

3.     <li>  

4.       <a class='normal' href='#'>  

5.         <svg viewBox='0 0 80 76' x='0px' y='0px'>  

6.           <g>  

7.             <path d='M 68.9708 24.8623 L 60.4554 2.3018 ...... 68.0625 Z'></path>  

8.           </g>  

9.         </svg>  

10.       </a>  

11.       <div class='info'>  

12.         <h4>...</h4>  

13.         <p>....</p>  

14.       </div>  

15.     </li>  

16.     ......   

17.   </ul>  

18. </div>      

19.   

CSS樣式

整個網格布局使用無序列表來制作，所有的li元素都采用左浮動。

CSS Code復制內容到剪貼板

1. ul {   

2.   padding: 0;   

3.   margin: 0 0 50px;   

4. }   

5. ul:after {   

6.   content: "";   

7.   display: table;   

8.   clear: both;   

9. }   

10.     

11. li {   

12.   position: relative;   

13.   float: left;   

14.   width: 200px;   

15.   height: 200px;   

16.   margin: 5px;   

17.   padding: 0;   

18.   list-style: none;   

19. }   

20. li a {   

21.   display: inline-block;   

22.   vertical-align: top;   

23.   text-decoration: none;   

24.   border-radius: 4px;   

25. }      

26.   

同時為了制作3D效果，為每一個li元素添加透視屬性。

CSS Code復制內容到剪貼板

1. li {   

2.   -webkit-perspective: 400px;   

3.           perspective: 400px;   

4. }       

用于制作3D翻轉的遮罩層div.info默認設置為100%的寬度和100%的高度，使用絕對定位，開始時位于左上角位置。然后使用rotate3d()函數將它沿X軸順時針旋轉90度，使其不可見。

CSS Code復制內容到剪貼板

1. .info {   

2.   -webkit-transform: rotate3d(1, 0, 0, 90deg);   

3.           transform: rotate3d(1, 0, 0, 90deg);   

4.   width: 100%;   

5.   height: 100%;   

6.   padding: 20px;   

7.   position: absolute;   

8.   top: 0;   

9.   left: 0;   

10.   border-radius: 4px;   

11.   pointer-events: none;   

12.   background-color: rgba(26, 188, 156, 0.9);   

13. }       

14.   

最后在CSS樣式中為鼠標從上下左右4個方向進入和離開時預設了class類，這些class是在鼠標進入網格時，使用JavaScript來檢測鼠標的進入方向，然后為其添加相應的class類。

CSS Code復制內容到剪貼板

1. .in-top .info {   

2.   -webkit-transform-origin: 50% 0%;   

3.           transform-origin: 50% 0%;   

4.   -webkit-animation: in-top 300ms ease 0ms 1 forwards;   

5.           animation: in-top 300ms ease 0ms 1 forwards;   

6. }   

7.     

8. .in-rightright .info {   

9.   -webkit-transform-origin: 100% 0%;   

10.           transform-origin: 100% 0%;   

11.   -webkit-animation: in-rightright 300ms ease 0ms 1 forwards;   

12.           animation: in-rightright 300ms ease 0ms 1 forwards;   

13. }   

14.     

15. .in-bottombottom .info {   

16.   -webkit-transform-origin: 50% 100%;   

17.           transform-origin: 50% 100%;   

18.   -webkit-animation: in-bottombottom 300ms ease 0ms 1 forwards;   

19.           animation: in-bottombottom 300ms ease 0ms 1 forwards;   

20. }   

21.     

22. .in-left .info {   

23.   -webkit-transform-origin: 0% 0%;   

24.           transform-origin: 0% 0%;   

25.   -webkit-animation: in-left 300ms ease 0ms 1 forwards;   

26.           animation: in-left 300ms ease 0ms 1 forwards;   

27. }   

28.     

29. .out-top .info {   

30.   -webkit-transform-origin: 50% 0%;   

31.           transform-origin: 50% 0%;   

32.   -webkit-animation: out-top 300ms ease 0ms 1 forwards;   

33.           animation: out-top 300ms ease 0ms 1 forwards;   

34. }   

35.     

36. .out-rightright .info {   

37.   -webkit-transform-origin: 100% 50%;   

38.           transform-origin: 100% 50%;   

39.   -webkit-animation: out-rightright 300ms ease 0ms 1 forwards;   

40.           animation: out-rightright 300ms ease 0ms 1 forwards;   

41. }   

42.     

43. .out-bottombottom .info {   

44.   -webkit-transform-origin: 50% 100%;   

45.           transform-origin: 50% 100%;   

46.   -webkit-animation: out-bottombottom 300ms ease 0ms 1 forwards;   

47.           animation: out-bottombottom 300ms ease 0ms 1 forwards;   

48. }   

49.     

50. .out-left .info {   

51.   -webkit-transform-origin: 0% 0%;   

52.           transform-origin: 0% 0%;   

53.   -webkit-animation: out-left 300ms ease 0ms 1 forwards;   

54.           animation: out-left 300ms ease 0ms 1 forwards;   

55. }       

56.   

 JavaScript

該特效中使用JavaScript來獲取鼠標進入網格的方向，為相應的網格動畫添加相應的class類。其中getDirection()函數為獲取方向函數。

JavaScript Code復制內容到剪貼板

1. var getDirection = function (ev, obj) {   

2.     var w = obj.offsetWidth,    

3.         h = obj.offsetHeight,    

4.         x = ev.pageX - obj.offsetLeft - w / 2 * (w > h ? h / w : 1),    

5.         y = ev.pageY - obj.offsetTop - h / 2 * (h > w ? w / h : 1),    

6.         d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;   

7.     return d;   

8. };       

9.   

然后通過遍歷所有的li元素，通過鼠標進入的方向來添加相應的class類。

JavaScript Code復制內容到剪貼板

1. var nodes = document.querySelectorAll('li'),   

2.     _nodes = [].slice.call(nodes, 0);   

3. var addClass = function (ev, obj, state) {   

4.     var direction = getDirection(ev, obj), class_suffix = '';   

5.     obj.className = '';   

6.     switch (direction) {   

7.     case 0:   

8.         class_suffix = '-top';   

9.         break;   

10.     case 1:   

11.         class_suffix = '-right';   

12.         break;   

13.     case 2:   

14.         class_suffix = '-bottom';   

15.         break;   

16.     case 3:   

17.         class_suffix = '-left';   

18.         break;   

19.     }   

20.     obj.classList.add(state + class_suffix);   

21. };   

22. _nodes.forEach(function (el) {   

23.     el.addEventListener('mouseover', function (ev) {   

24.         addClass(ev, this, 'in');   

25.     }, false);   

26.     el.addEventListener('mouseout', function (ev) {   

27.         addClass(ev, this, 'out');   

28.     }, false);   

29. });      

“CSS3制作帶方向感應的鼠標滑過圖片3D動畫”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！