[HTML+CSS]-3D透视游戏卡片交互
以下3D透视游戏卡片交互基于HTML、CSS、vanilla-tilt.js，下面展示运行效果：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3D卡片透视效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.warp {
width: 100%;
height: 100vh;
/* background: url(img/bg.jpg) no-repeat center; */
background: url(https://pic2.imgdb.cn/item/645214d40d2dde57771fa617.jpg)
no-repeat center;
background-size: cover; /* 平铺显示 */
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 300px;
color: #fff;
background: #fff;
/* 然后不去给它指定高度，让文字自己把div撑起来，比较弹性 */
border-radius: 20px;
position: relative;
transform-style: preserve-3d;
}
.banner {
width: 100%;
height: 230px;
/* background: url(img/cardbg.jpg); */
background: url(https://pic2.imgdb.cn/item/645214d40d2dde57771fa636.jpg);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.content {
width: 90%;
margin: auto;
text-align: center;
transform: translateZ(30px);
}
.content h3 {
padding-top: 20px;
color: #f6901a;
font-weight: 400;
}
.content h1 {
padding-top: 10px;
color: #3c3c3c;
font-weight: 200;
}
.content p {
padding-bottom: 20px;
color: #9e9e9e;
}
.data {
width: 100%;
height: 90px;
background: #f6901a;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
}
.data h1 {
font-size: 20px;
}
.role {
width: 400px;
position: absolute;
top: -100px;
left: -80px;
transform: translateZ(50px);
}
</style>
</head>
<body>
<div class="warp">
<div class="card" data-tilt>
<div class="role">
<!-- <img src="img/role.png" alt="" /> -->
<img
src="https://pic2.imgdb.cn/item/645214d40d2dde57771fa664.png"
alt=""
/>
</div>
<div class="banner"></div>
<div class="content">
<h3>LEVEL 4</h3>
<h1>The Barbarian</h1>
<p>
The Barbarian is a kilt-clad Scottish warrior with an angry
battle-ready expression, hungry for destruction.
</p>
</div>
<div class="data">
<div class="item">
<h1>20</h1>
<p>TRAIN</p>
</div>
<div class="item">
<h1>16</h1>
<p>SPEED</p>
</div>
<div class="item">
<h1>150</h1>
<p>COST</p>
</div>
</div>
</div>
</div>
<!-- <script src="./node_modules/vanilla-tilt/dist/vanilla-tilt.js">
VanillaTilt.init(document.querySelector(".card"), {
max: 30, // 控制倾斜角度
speed: 3000, //控制回弹正常的时间
});
</script> -->
<!-- 用下CDN加载的js -->
<script src="https://cdn.jsdelivr.net/npm/vanilla-tilt">
VanillaTilt.init(document.querySelector(".card"), {
max: 30, // 控制倾斜角度
speed: 3000, //控制回弹正常的时间
})
</script>
</body>
</html>
注：如果图床图片过期，可私信我获取图片资源~
知识点补充
box-sizing: border-box;
是 IE 盒模型，而不是标准盒模型，包括内边距（padding）、边框（border）和外边距（margin）
css中vh是什么单位?
vh是CSS中的一个相对长度单位，表示视口（viewport）高度的百分比。视口是指当前浏览器窗口或容器的可视区域，vh单位的大小等于视口高度的百分比，其中1vh等于视口高度的1%。
例如，如果浏览器窗口的高度为800px，则1vh等于8px（因为1% * 800px = 8px）。使用vh单位可以方便地根据视口大小调整元素的大小和位置，使得页面在不同设备和屏幕尺寸下都能够自适应。
与vh类似的还有另外两个单位：vw和vmin。vw表示视口宽度的百分比，vmin表示视口宽度和高度中较小的那个的百分比。
text-align: center;
text-align: center;是CSS中的一个属性值，用于水平居中元素中的文本内容。该属性可应用于块级元素和一些内联元素。当应用于块级元素时，
text-align: center;将会使该元素内部的所有文本内容（包括内联元素和行内块级元素）水平居中，例如：<div style="text-align: center;"> <h1>这是标题</h1> <p>这是一段文本</p> </div>当应用于内联元素时，
text-align: center;将会使该元素本身水平居中，例如：<span style="text-align: center;">这是内联元素</span>需要注意的是，
text-align: center;只能控制文本内容的水平居中，而不能控制元素本身的水平居中。如果需要使一个块级元素水平居中，可以通过设置margin属性来实现，例如：<div style="margin: 0 auto;"> <p>这是一段文本</p> </div>上面的例子中，
margin: 0 auto;将会使该元素在其父元素中水平居中。
font-weight: 200; 为什么这里不用单位？
font-weight属性指定了文本的粗细程度，其值可以是数字、关键字或者百分数。数字值用于指定粗细的级别，数值越大表示粗细程度越高。200是数字值之一，表示比默认字重更轻的级别。因此，font-weight: 200;表示将文本的粗细程度设置为比==默认字重==更轻的级别。在CSS中，有些属性的值可以省略单位。例如，像素（px）是常用的长度单位，但是在某些情况下也可以省略。对于
font-weight属性来说，数字值可以直接使用，不需要添加任何单位。但是，如果使用其他单位，例如百分数或关键字（如normal、bold等），则需要加上相应的单位或关键字。总之，
font-weight: 200;是合法的CSS代码，它表示将文本的粗细程度设置为比默认字重更轻的级别，且数字值不需要添加单位。font-weight默认字重是多少
根据 CSS 规范，
font-weight的默认值是normal，其对应的字重是400。不过，这个默认值可能因浏览器而异。例如，在 Chrome 浏览器中，默认字重为400，而在 Firefox 中默认字重为normal，但实际上两者都表示相同的字重。此外，
font-weight还支持其他的字重取值，如bold、bolder、lighter等。这些取值的实际字重值也可能因浏览器而异。例如，bold对应的字重通常为700，而在某些浏览器中可能是600或800。所以它这里的单位是px？
不是的，
font-weight: 200;中的数字200并不是像素单位，也不是任何其他单位。数字200是font-weight属性的一个可选值，它代表一种特定的字重级别，比默认字重更轻。
font-weight属性值可以是数字、关键字或百分数。当使用数字值时，浏览器会尝试选择最接近的可用字重级别。在具体实现中，不同字重级别对应的数字值可能不同，具体取值取决于字体的设计者和字体文件的具体实现。因此，数字200并不代表任何特定的长度单位，仅仅是一个表示字重级别的数字值。字重级别是什么意思？
在CSS中，
font-weight属性用于控制字体的粗细程度。字体的粗细程度通常被称为字重，可以理解为“字体的厚度”。不同的字体可以有不同的字重级别，常见的有normal、bold、lighter和bolder等。这些关键字表示字重的不同程度，通常是由字体的设计者根据字形的特征和美学需求来确定的。除了关键字，
font-weight属性的值还可以是数字，用于指定粗细的级别。**数字值从100到900，以100为步长，分为9个级别，其中100表示最细的字重，900表示最粗的字重。**在实际应用中，使用数字值来指定字重级别通常是比较灵活和准确的方式。在CSS中，不同字重级别对应的数字值可能有所不同，这取决于具体的字体文件和字体的设计者。在一些字体中，数字值越大表示字重越重，而在另一些字体中则可能是反过来的。因此，在选择字体和使用
font-weight属性时，需要根据具体情况来确定合适的值。
css中，color: #3c3c3c; 这里color值里大小写字母有区别吗？
在CSS中，颜色值是不区分大小写的。因此，
color: #3c3c3c;和color: #3C3C3C;是等效的，都表示将文本颜色设置为深灰色。虽然在实际应用中，颜色值的大小写并不影响最终效果，但为了保持代码的规范性和一致性，通常建议使用小写字母来表示颜色值。这样可以避免因大小写不一致而引起的代码混乱和错误。此外，使用小写字母也可以提高代码的可读性和可维护性。
background: pink; 和 background-color: pink; 二者什么区别？
background: pink;和background-color: pink;这两个CSS属性虽然都可以用来设置元素的背景色，但是它们实际上有一些区别。
background是一个复合属性，它可以用来设置元素的背景颜色、背景图片、背景位置、背景大小等多个相关属性。因此，当你设置background: pink;时，除了设置背景颜色为粉色外，还可以同时设置其他背景属性。而
background-color是用来设置元素背景色的属性，只能设置背景颜色，不能设置其他背景属性。因此，当你设置background-color: pink;时，只会设置元素的背景颜色为粉色，其他背景属性不会受到影响。需要注意的是，如果你同时设置了
background和background-color，则background-color的值会覆盖background中的背景色设置。因此，在只需要设置元素的背景颜色时，建议使用background-color属性，这样可以避免其他背景属性的干扰，使代码更加简洁明了。
即使background-color属性写在background 属性的上面，background 属性也会被覆盖吗？
是的，即使将
background-color属性写在background属性的上面，如果background属性中也包含了对背景颜色的设置，那么最终仍然会以background-color属性的值为准，覆盖background属性中的背景颜色设置。这是因为，CSS样式表中的规则是按照“层叠顺序”来决定优先级的，而不是按照书写顺序。而在层叠顺序中，单个属性的优先级通常高于复合属性的优先级。
因此，如果你只需要设置元素的背景颜色，建议直接使用
background-color属性，这样可以使代码更加简洁明了，并避免不必要的覆盖问题。
align-items: center;
align-items: center;是CSS中用于设置flex容器内项目在交叉轴上对齐方式的属性。其中，center表示将所有项目在交叉轴上居中对齐。具体来说，如果一个flex容器中的所有项目都是单行的，那么
align-items: center;会使所有项目在垂直方向上居中对齐；如果所有项目都是单列的，那么align-items: center;会使所有项目在水平方向上居中对齐。如果项目是多行或多列的，那么align-items: center;会使所有行（列）在垂直方向（水平方向）上居中对齐。需要注意的是，
align-items只对flex容器内部的项目起作用，不会影响flex容器本身在交叉轴上的对齐方式。如果需要设置flex容器在交叉轴上的对齐方式，可以使用align-self属性或者设置flex容器的高度（在交叉轴方向上）。
讲一下vanilla-tilt.js
Vanilla-tilt.js是一款轻量级的JavaScript库，可以通过鼠标移动或设备方向传感器控制HTML元素的3D倾斜效果，从而提高用户体验和视觉效果。
使用vanilla-tilt.js非常简单，只需在HTML中引入vanilla-tilt.js的JavaScript文件，然后在需要应用倾斜效果的元素上添加指定的class名即可。此外，还可以通过JavaScript API来自定义配置和控制元素的倾斜效果。
Vanilla-tilt.js支持多种配置选项，如旋转角度、倾斜方向、倾斜程度、反向倾斜、灵敏度、最大旋转角度、最大倾斜角度等等，可以根据具体需求进行自定义配置。
总的来说，vanilla-tilt.js是一款简单易用但功能强大的JavaScript库，可以帮助开发者快速实现炫酷的倾斜效果，提高网页的交互性和视觉效果。
**讲一下npm init 和 npm -y **
npm init和npm -y都是npm命令行工具中的命令。
npm init命令用于在当前目录下生成package.json文件，这个文件用来管理npm包的依赖关系、版本、作者、描述、许可证等信息。使用该命令会提示用户输入一些基本信息（如项目名称、版本号、作者、许可证等），然后生成package.json文件。在执行npm install安装依赖时，npm会根据package.json文件中的依赖信息自动安装所需的包。
npm -y命令则是一种快速生成package.json文件的方式。它会自动将所有生成package.json文件所需的信息设置为默认值，包括项目名称、版本号、作者、许可证等等。使用该命令可以在不需要手动输入基本信息的情况下快速生成package.json文件，特别是在初始化项目时非常方便。需要注意的是，使用
npm -y命令生成的package.json文件可能不包含所有需要的信息，开发者可能需要手动编辑package.json文件并添加必要的信息。他们之间有什么区别和联系
npm init和npm -y两个命令的作用都是生成package.json文件，它们之间的区别在于使用的方式不同。
npm init命令会在生成package.json文件之前提示用户输入一些基本信息，例如项目名称、版本、作者、许可证等，因此可以根据需要自定义package.json文件的内容和结构。而
npm -y命令则是一种快速生成package.json文件的方式，会使用默认值填充package.json文件中的基本信息，例如项目名称、版本、作者、许可证等，因此生成的package.json文件可能会缺少一些需要的信息。在实际开发中，开发者可以根据需要使用这两个命令来生成
package.json文件。当需要自定义项目的基本信息时，可以使用npm init命令；而当不需要输入基本信息，快速生成package.json文件时，可以使用npm -y命令。
URL-friendly characters包括什么，不包括什么？
URL-friendly characters是指在URL（统一资源定位器）中可以安全使用的字符集合。URL-friendly characters包括：
- 数字（0-9）
- 字母（A-Z，a-z）
- 下划线（_）
- 连字符（-）
- 点号（.）
- 波浪线（~）
除了上述字符，其它字符都需要进行URL编码才能在URL中使用，否则可能会引起错误或者不可预测的结果。需要注意的是，不同的URL编码方式可能使用不同的编码字符集，因此在编写代码时需要根据实际情况选择合适的编码方式。
讲一下transform-style: preserve-3d;
transform-style: preserve-3d;是CSS3中的一个属性，用于控制元素的3D变换效果。当一个元素及其子元素应用3D变换时，如果没有指定
transform-style属性，那么该元素的子元素将被拉到元素的平面上进行变换，失去了3D效果。如果希望子元素保持其3D变换效果，需要在父元素中添加transform-style: preserve-3d;属性。该属性的值为
preserve-3d时，表示子元素继承父元素的3D变换，并在自己的3D空间中进行变换；如果该属性的值为flat，则表示子元素不继承父元素的3D变换，而是在父元素的平面上进行变换，即使父元素应用了3D变换，子元素也不会保留其3D效果。总之，
transform-style: preserve-3d;可以使元素及其子元素在应用3D变换时，保持各自的3D效果，从而创建出更为逼真的3D场景。
preserve 保留；保持
vanilla-tilt.js 的 CDN
vanilla-tilt.js可以通过CDN（内容分发网络）进行引入。以下是vanilla-tilt.js的CDN链接：
<!-- 从unpkg.com引入 --> <script src="https://unpkg.com/vanilla-tilt@1.7.0/dist/vanilla-tilt.min.js"></script> <!-- 从cdn.jsdelivr.net引入 --> <script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.7.0/dist/vanilla-tilt.min.js"></script>使用CDN可以加速脚本的加载速度，减轻服务器的负载，也可以减少本地的资源消耗。同时，使用CDN还能有效地提高网站的可用性和可靠性，从而提升用户体验。
codeium自动给我生成了 根据的注释
讲一下grid-template-columns: 300px 300px 300px;
grid-template-columns是CSS Grid布局中用来指定网格容器的列宽的属性，它可以接受多个值，每个值表示一列的宽度。例如，
grid-template-columns: 300px 300px 300px;表示将网格容器分成3列，每列的宽度都为300px。这里的值可以是像素、百分比或其他支持的单位，也可以是auto。如果网格容器需要分成更多的列，可以在
grid-template-columns中使用更多的值，如grid-template-columns: 200px 200px 200px 200px 200px;表示将网格容器分成5列，每列的宽度为200px。另外，也可以使用其他的语法来指定网格容器的列宽，如使用
repeat函数来重复列的宽度，如grid-template-columns: repeat(3, 300px);表示将网格容器分成3列，每列的宽度都为300px。还可以使用fr单位来指定列的宽度比例，如grid-template-columns: 1fr 2fr 1fr;表示将网格容器分成3列，第二列的宽度是第一列和第三列的两倍。通过设置
grid-template-columns属性，我们可以灵活地定义网格容器的列宽，从而创建出丰富多彩的网格布局。
讲一下justify-content: space-between;
justify-content属性用于水平对齐网格容器中的所有网格项目（grid items）。当属性值为
space-between时，网格项目沿主轴等间距分布。也就是说，网格项目之间的间隔相等，而且左右两端的网格项目分别靠近网格容器的两端。如下所示：.grid-container { display: grid; grid-template-columns: repeat(3, 100px); justify-content: space-between; }在这个例子中，网格容器分成了三列，每列的宽度都是
100px。justify-content: space-between;属性让每个网格项目沿主轴等间距分布，所以第一个和最后一个网格项目紧贴网格容器的两端，而中间的网格项目则等间距排列。这种排列方式常用于实现按钮组、图标组、导航菜单等UI组件。
讲一下flex-direction: column;
flex-direction属性用于指定 Flex 容器中主轴的方向。当属性值为column时，主轴是从上到下排列的，交叉轴是从左到右排列的。这意味着 Flex 容器中的 Flex 项目将按照从上到下的方向排列，而不是从左到右的方向。例如，假设我们有一个 Flex 容器，其中包含三个 Flex 项目。我们将
flex-direction属性设置为column，并将容器高度设置为300px。那么这三个项目就会按照从上到下的顺序排列，每个项目的高度都是100px，宽度则是容器的宽度。.flex-container { display: flex; flex-direction: column; height: 300px; } .flex-item { height: 100px; width: 100%; }通过这种方式，我们可以实现多列布局、垂直居中等效果。同时，我们也可以使用
justify-content和align-items等属性来对 Flex 项目进行水平和垂直方向的对齐。
