vue3+vite简单实现3D透视游戏卡片，运用vanilla-tilt（一个平滑的 3D 倾斜库）

海阔咦
364 阅读3分钟
效果图：

3D卡片倾斜.gif

项目地址：

gitee.com/beikang/vue…

文档地址：

micku7zu.github.io/vanilla-til…

GitHub地址：

github.com/gijsroge/ti…

第一步安装vanilla-tilt依赖包

npm install vanilla-tilt

第二步页面引入

import VanillaTilt from 'vanilla-tilt';

第三步页面声明一个classdom节点

        <div class="card-item">
            <div class="role"><img src="./assets/images/giant.png" alt="" /></div>
            <div class="des">
                <h6>LEVEL 5</h6>
                <h1>The Giant</h1>
                <p>
                    Slow, steady and powerful, Giants are massive warriors that soak up
                    huge amounts of damage. Show them a turret or cannon and you'll see
                    their fury unleashed!
                </p>
            </div>
            <div class="btn-list">
                <div class="btn">
                    <h3>2</h3>
                    <span>TRAIN</span>
                </div>
                <div class="btn">
                    <h3>12</h3>
                    <span>SPEED</span>
                </div>
                <div class="btn">
                    <h3>2250</h3>
                    <span>COST</span>
                </div>
            </div>
        </div>

第四部使用vanilla-tilt

  // VanillaTilt.init(document.querySelector(".card-item"),{
  //   reverse:true,
  //   max: 60, // 控制倾斜角度
  //   speed: 3000, //控制回弹正常的时间
  // })
  	//It also supports NodeList
	VanillaTilt.init(document.querySelectorAll(".card-item"),{
    reverse:true,
    max: 35, // 控制倾斜角度
    speed: 2000, //控制回弹正常的时间
    scale:1.2,
  });
完整代码块：

<script setup>
import VanillaTilt from 'vanilla-tilt';
import { ref,onMounted } from 'vue'

onMounted(()=>{
  // VanillaTilt.init(document.querySelector(".card-item"),{
  //   reverse:true,
  //   max: 60, // 控制倾斜角度
  //   speed: 3000, //控制回弹正常的时间
  // })
  	//It also supports NodeList
	VanillaTilt.init(document.querySelectorAll(".card-item"),{
    reverse:true,
    max: 35, // 控制倾斜角度
    speed: 2000, //控制回弹正常的时间
    scale:1.2,
  });
})
</script>

<template>
       <div class="wrap">
        <div class="card-item">
            <div class="role"><img src="./assets/images/giant.png" alt="" /></div>
            <div class="des">
                <h6>LEVEL 5</h6>
                <h1>The Giant</h1>
                <p>
                    Slow, steady and powerful, Giants are massive warriors that soak up
                    huge amounts of damage. Show them a turret or cannon and you'll see
                    their fury unleashed!
                </p>
            </div>
            <div class="btn-list">
                <div class="btn">
                    <h3>2</h3>
                    <span>TRAIN</span>
                </div>
                <div class="btn">
                    <h3>12</h3>
                    <span>SPEED</span>
                </div>
                <div class="btn">
                    <h3>2250</h3>
                    <span>COST</span>
                </div>
            </div>
        </div>
        <div class="card-item">
            <div class="role"><img src="./assets/images/barbarian.png" alt="" /></div>
            <div class="des">
                <h6>LEVEL 4</h6>
                <h1>The Barbarian</h1>
                <p>
                    The Barbarian is a kilt-clad Scottish warrior with an angry,
                    battle-ready expression, hungry for destruction. He has Killer
                    yellow horseshoe mustache, warrior, battle-ready.
                </p>
            </div>
            <div class="btn-list">
                <div class="btn">
                    <h3>20</h3>
                    <span>TRAIN</span>
                </div>
                <div class="btn">
                    <h3>16</h3>
                    <span>SPEED</span>
                </div>
                <div class="btn">
                    <h3>150</h3>
                    <span>COST</span>
                </div>
            </div>
        </div>
        <div class="card-item">
            <div class="role"><img src="./assets/images/wizard.png" alt="" /></div>
            <div class="des">
                <h6>LEVEL 6</h6>
                <h1>The Wizard</h1>
                <p>
                    The Wizard is a terrifying presence on the battlefield. Pair him up
                    with some of his fellows and cast concentrated blasts of destruction
                    on anything, land or sky!
                </p>
            </div>
            <div class="btn-list">
                <div class="btn">
                    <h3>5</h3>
                    <span>TRAIN</span>
                </div>
                <div class="btn">
                    <h3>16</h3>
                    <span>SPEED</span>
                </div>
                <div class="btn">
                    <h3>4000</h3>
                    <span>COST</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(./assets/images/bg.jpg) no-repeat;
    background-size: cover;
}
.wrap{
    width: 1200px;
    min-height: 100px;
    display: grid;
    grid-template-columns: 300px 300px 300px;
    justify-content: space-between;
}

.card-item{
    width: 100%;
    border-radius: 20px;
    background-color: #fff;
     box-shadow: -1px 15px 30px -12px #000;
     transform-style: preserve-3d;
}

.role{
    width: 100%;
    height: 230px;
    border-radius: 20px;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    background: url(./assets/images/listbg1.jpg);
    position: relative;
}
.role img{
    width:390px;
    position: absolute;
    top: -30%;
    left: -18%;
    transform:translateZ(50px);
}

.des{
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: center;
     transform:translateZ(50px);
}
.des h6{
    color: #F6901A;
    font-weight: 400;
}

.des h1{
padding: 10px;
font-size: 26px;
}
.des p{
    text-align: left;
    font-size: 14px;
    padding: 0 16px;
    color: #9e9e9e;
}


.btn-list{
    width: 100%;
    display: flex;
    justify-content: space-around;
    background-color: #F6901A;
    border-radius: 20px;
    border-top-left-radius:0;
    border-top-right-radius:0;
}
.btn{
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 20px 0;
}
.btn h3{
    margin-bottom: 4px;
    color: #fff;
}
.btn span{
    font-size: 14px;
    color: #fff;
}

</style>
文档说明：

部分配置选项。其他请参考官网

项目默认值描述
reversefalse反转倾斜方向（设置为 true 时，鼠标在目标元素悬浮时该处会向屏幕内测倾斜，默认向屏幕外侧倾斜）
max35最大倾斜角度。
scale1设置鼠标悬浮于目标元素时，目标元素的放缩倍数。
glarefalse如果设置为 True，则会在鼠标悬停的位置制造反光效果，反光效果仅出现在目标元素的下面部分。
max-glare1设置反光强度，取值范围为 0~1，该配置选项的值越是接近于 1 反光强度越大。反光强度的大小可以理解为 照到目标元素的那束光的光照强度 。该配置选项为 0 时与 glare 设置为 false 时的效果无异。
axisnull设置被激活的坐标轴，被禁用的坐标轴将不会产生倾斜效果。该配置选项的取值有 x、y 及 null。其中 null 表示同时激活 x 与 y 轴。
resettrue当该选项设置为 false 时，鼠标若离开目标元素，目标元素将维持鼠标离开前的状态（倾斜状态及放缩状态）。若该选项设置为 true，鼠标若离开目标元素，目标元素将被去除倾斜状态及放缩状态。
startX0设置目标元素在 x 轴上的初始默认状态。若要使用该选项，需要保证配置选项 reset 及 reset-to-start 的值均为 true 。
startY0设置目标元素在 y 轴上的初始默认状态。若要使用该选项，需要保证配置选项 reset 及 reset-to-start 的值均为 true 。
reset-to-starttrue若该选项设置为 true，鼠标离开目标元素时，目标元素的倾斜状态将恢复至配置选项 startX 及 startY 指定的倾斜状态。
full-page-listeningfalse当该配置选项设置为 true 时，目标元素将响应当前页面的任何鼠标移动（鼠标即使没有悬停在目标元素中，也可以通过鼠标移动控制目标元素的倾斜状态）。
avatar
文章
阅读
粉丝