Vue项目、Nuxt项目引入Vanilla-tilt

#前言  vanilla-tilt.js 是 JavaScript 中的一个平滑的 3D 倾斜库。主要是记录关于vanilla-tilt在vue项目里面的使用步骤和配置参数，欢迎指正！

一、安装vanilla-tilt

npm install vanilla-tilt

二、在需要运用到插件的页面引入Vanilla-tilt

import VanillaTilt from "vanilla-tilt";

三、使用代码

<template>
  <div style="">
    <h1>联系我们页</h1>
    <div class="wrap">
      <div class="card-item">
        <div class="des">
          <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>
      <div class="card-item">
        <div class="des">
          <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>
      <div class="card-item">
        <div class="des">
          <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>
    </div>
  </div>
</template>

<script setup>
import VanillaTilt from "vanilla-tilt";

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

<style scoped lang="less">
.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: #1989fa;
  box-shadow: -1px 15px 30px -12px #000;
  transform-style: preserve-3d;

  :hover {
    cursor: pointer;
  }
}

.role img {
  width: 390px;
  position: absolute;
  top: -30%;
  left: -18%;
  transform: translateZ(50px);
}

.des {
  margin: 20px 0;
  text-align: center;
  transform: translateZ(50px);
}

.des h1 {
  padding: 10px;
  font-size: 26px;
}

.des p {
  text-align: left;
  font-size: 14px;
  padding: 0 16px;
  color: #fff;
}
</style>

四、vanilla-tilt配置选项