使用tilt.js设计一个3D悬停注释卡片

3D悬停注释卡片： 在悬停时，卡片将在顶部显示另一张具有3D效果的卡片，该卡片还具有倾斜效果。可以使用 vanilla-tilt.js 库和 CSS 来创建此效果。

安装： 可以使用Node包管理器（npm）安装，也可以在代码中添加CDN链接。

npm命令：

 npm install vanilla-tilt

CDN链接：

https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js

示例： 下面的示例使用tilt.js创建了一个3D悬停效果的卡片。

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content="width=device-width,  
                       initial-scale=1.0" /> 
    <!--CDN Link-->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"> 
    </script> 
  
    <style> 
        .parent_box { 
            top: 30px; 
            left: 30px; 
            position: relative; 
            width: 300px; 
            height: 230px; 
            margin: 10px 0; 
            transform-style: preserve-3d; 
            background-color: green; 
            color: white; 
        } 
          
        .parent_box:hover { 
            box-shadow: 0 50px 80px rgba(0, 0, 0, 0.2); 
        } 
          
        .parent_box .base_element { 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
        } 
          
        .parent_box .content_box { 
            background-color: white; 
            position: absolute; 
            top: 30%; 
            left: 40px; 
            right: 40px; 
            font-weight: 700; 
            font-size: 20px; 
            color: green; 
            text-align: center; 
            transform: translateZ(20px) scaleY(0); 
            padding: 40px 25px; 
            transform-origin: top; 
            transform: 0.5s; 
            transform-style: preserve-3d; 
        } 
          
        .parent_box:hover .content_box { 
            transform: translateZ(50px) scaleY(1); 
        } 
    </style> 
</head> 
  
<body> 
    <div class="parent_box" data-tilt data-tilt-scale="1.1"> 
  
        <!-- Initial Element-->
        <div class="Base_element"> 
            You Are On 
        </div> 
  
        <!--Element To Be Showed On Hovering-->
        <div class="content_box"> 
            Geeks For Geeks 
        </div> 
    </div> 
      
    <script type="text/javascript"> 
        VanillaTilt.init(document.querySelectorAll(".parent_box"), { 
  
            // max tilt rotation (degrees) 
            max: 25, 
  
            // Speed of the enter/exit transition 
            speed: 400, 
        }); 
    </script> 
</body> 
  
</html>

输出：

使用tilt.js设计一个3D悬停注释卡片