此教程来源于一个js库(vanilla-tilt.js)
网址如下：
https://micku7zu.github.io/vanilla-tilt.js/
下面存放四个库：
今天教学的是第三个库(vanilla-tilt.babel.js)
下面我们演示下：
- 下面我们写了五个div，一个父元素，四个子元素
- 分别写样式
下面我们加入js：
注意的是js中的
querySelector只能让我们的四个div中的第一个div3D效果，需要其它三个div3D需要把它改成：querySelectorAll效果图如下：
我们再加入css动画和z轴样式：
很简单吧
源码放下面：
- html源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="card">
<div class="card-item">
<img src="https://www.cenguigui.cn/log/vanilla-tilt/card.png" alt="">
<h4>没有什么太难的事关键是敢于尝试</h4>
<p>有钱人终成眷属，没钱人亲眼目睹！人间忽晚山河已秋</p>
</div>
<div class="card-item">
<img src="https://www.cenguigui.cn/log/vanilla-tilt/card.png" alt="">
<h4>没有什么太难的事关键是敢于尝试</h4>
<p>有钱人终成眷属，没钱人亲眼目睹！人间忽晚山河已秋</p>
</div>
<div class="card-item">
<img src="https://www.cenguigui.cn/log/vanilla-tilt/card.png" alt="">
<h4>没有什么太难的事关键是敢于尝试</h4>
<p>有钱人终成眷属，没钱人亲眼目睹！人间忽晚山河已秋</p>
</div>
<div class="card-item">
<img src="https://www.cenguigui.cn/log/vanilla-tilt/card.png" alt="">
<h4>没有什么太难的事关键是敢于尝试</h4>
<p>有钱人终成眷属，没钱人亲眼目睹！人间忽晚山河已秋</p>
</div>
</div>
<script type="text/javascript" src="https://www.cenguigui.cn/log/vanilla-tilt/js/vanilla-tilt.babel.js"></script>
<script type="text/javascript">
VanillaTilt.init(document.querySelectorAll(".card-item"), {
max: 50,//鼠标经过时它旋转的角度
speed: 3000 //鼠标经过时它的旋转速度
});
</script>
</body>
</html>- css源码：
.card {
font-family: 'Guiguifonts';
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
height: 100vh;
/* 视窗高度 */
}
.card-item {
font-family: 'Guiguifonts';
width: 200px;
height: 250px;
background-color: #171b17;
border: 1px solid #31363d;
border-radius: 10px;
text-align: center;
/* 创建视差效果 */
transform-style: preserve-3d; /*视觉差的3D*/
transform: perspective(1000px); /*1000 px是默认透视*/
}
.card-item img {
width: 80px;
margin-top: -40px;
/* 创建视差效果 让元素跳出*/
transform: translateZ(30px); /*让元素跳出来*/
}
.card-item h4 {
color: #fff;
margin-top: 20px;
text-shadow: 2px 2px 2px rgba(255, 255, 255, .5);
/* 创建视差效果 让元素跳出*/
transform: translateZ(40px); /*让元素跳出来*/
}
.card-item p {
margin: 35px;
font-size: 12px;
color: #7f859c;
text-align: left;
/* 创建视差效果 让元素跳出*/
transform: translateZ(30px); /*让元素跳出来*/
}
好了教程就到这就结束了，下面我把效果页面翻页总结出来：
最基本的用法：
- 添加
<script src=“ vanilla-tilt. js “>< / script>就在关门前</ body>标签 - 标记元素
<div data-tilt></div>
创建视差效果：
1. 添加 transform-style: preserve-3d 你的倾斜元件
2. 添加 transform: perspective(1000px); 你的倾斜元件。（1000 px是默认透视，但可以更改）
3. 添加 transform: translateZ(20px) 你的内在元素必须要跳出来眩光效应：
设置此选项将启用眩光效果。您可以调整眩光值
data-tilt-max-glare<div data-tilt data-tilt-glare data-tilt-max-glare="0.8"></div>反向倾斜：
设置此选项将反转倾斜。
<div data-tilt data-tilt-reverse="true"></div>保持漂浮：
当用户鼠标离开元素时，设置此选项将不会重置倾斜元素。
<div data-tilt data-tilt-reset="false"></div>整页收听：
设置此选项将使元素响应页面上的任何鼠标移动。
<div data-tilt data-tilt-full-page-listening></div>悬停缩放：
设置此选项将在悬停时缩放倾斜元素。
<div data-tilt data-tilt-scale="1.1"></div>开始倾斜位置：
设置此选项将在页面加载时以特定角度倾斜元素。
<div data-tilt data-tilt-startX="20" data-tilt-startY="-20" data-tilt-reset-to-start="true"></div>“reset-to-start”-在鼠标离开时将位置重置为[startX，startY]
禁用X轴：
设置此选项将禁用倾斜元件上的X轴。
<div data-tilt data-tilt-axis="y"></div>禁用Y轴：
设置此选项将禁用倾斜元件上的Y轴。
<div data-tilt data-tilt-axis="x"></div>销毁方法：
调用此方法将从tilt元素中删除所有事件和类。
let destroyBox = document.querySelector("#destroy-box");
VanillaTilt.init(destroyBox);
document.querySelector("#destroy-button").addEventListener("click", function () {
destroyBox.vanillaTilt.destroy();
});
document.querySelector("#enable-button").addEventListener("click", function () {
VanillaTilt.init(destroyBox);
});毁坏 启用
倾斜变化事件：
倾斜改变事件将输出倾斜的x、y&百分比。
let eventBox = document.querySelector("#box-event");
let outputContainer = document.querySelector(".output");
VanillaTilt.init(eventBox);
eventBox.addEventListener("tiltChange", function (event) {
let li = document.createElement("li");
li.textContent = JSON.stringify(event.detail);
outputContainer.insertBefore(li, outputContainer.firstChild);
});四个库的js地址我已经上传到我的服务器了，可以调用我的也可以另存到本地：
https://www.cenguigui.cn/log/vanilla-tilt/js/vanilla-tilt.js
https://www.cenguigui.cn/log/vanilla-tilt/js/vanilla-tilt.min.js
https://www.cenguigui.cn/log/vanilla-tilt/js/vanilla-tilt.babel.js
https://www.cenguigui.cn/log/vanilla-tilt/js/vanilla-tilt.babel.min.js