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

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

安装：这可以通过使用节点包管理器 (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 悬停效果卡。

HTML

  

    
    
    
    
    
  
    
        .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);
        }
    

  

    
  
        
        
            You Are On
        
  
        
        
            Geeks For Geeks
        
    
      
    
        VanillaTilt.init(document.querySelectorAll(".parent_box"), {
  
            // max tilt rotation (degrees)
            max: 25,
  
            // Speed of the enter/exit transition
            speed: 400,
        });
    

  

输出：

3D 悬停注释卡