大家好啊，我是🍟，今天来给大家看一些东西。
众所不周知，我想成为一名卡牌大师，但是我只是一只malou罢了。所以我只能在我的计算鸡上实现我小时候的卡牌大师梦了。
那么，要成为一名赛博卡牌大师，我们应该干什么呢？
unsetunsetStep1：拥有一张卡牌unsetunset
我们需要拥有自己的卡，但是这不是你的校园卡或者银行卡，而是你的赛博电子卡。
下面是我的癫子卡
但是，它太过于丑陋了，这不就是一个破网页上的破白色块吗。作为癫子卡牌大师，这样的卡牌配不上我们高贵的赛博卡牌大师身份。
unsetunsetStep2: 让它动起来unsetunset
聪明的同学已经看到了，我已经写出 ”preserve-3d“这么高级的代码，但是因为还没有添加任何的 3D 变换代码，所以它还是一个不入流的卡片。接下来，让我们尝试将卡牌动起来！
ok，我们添加了这么一行代码：
现在是不是有点3d的味道了，但是毕竟还是静态的一个演示，我们来尝试下把它变成随着我们光标移动而移动：
我们先来实现X轴方向上的移动：
解：以卡牌的中心为原点做水平方向的X轴，竖直方向为Y轴，分析可得：
- 鼠标在中心右侧移动，元素绕 Y 轴移动，并且值从 0 开始，越来越大，范围为(0, +∞)deg
- 鼠标在中心左侧移动，元素绕 Y 轴移动，并且值从 0 开始，越来越小，范围为(-∞, 0)deg
于是我们需要借助这个公式：
1 | rotateY = (鼠标 x 坐标 - 元素左上角 x 坐标 - 元素宽度的一半)deg |
（为啥是左上角，可以看看这篇文章：getBoundingClientRect() 详解 - 掘金 (juejin.cn)）
然后通过绑定 onmousemove 事件，我们来写一下JS：
> 非常好代码，使我卡片旋转
转的太猛了，我们加一个控制：multiple = 20 ，这样我们可以减小X轴方向转动的幅度了！
Y轴同理可以实现，但是你会观察到：卡片移动时，它的面并不是对着光标的，所以对clacX简单的*（-1）就可以了
接下来 我们合并X·Y轴方向的代码，然后加上一张你喜欢的图片：
然后这张卡片就立正起来了！（战地小伙立正了！）
unsetunsetStep 3：让卡牌更加帅气！unsetunset
这样的卡牌，还不够逼真，我们可是赛博卡牌大师，应该更进一步，成为真正的卡牌MASTER啊！
让卡片变得有光泽
我们只需要混合模式+黑白渐变的静态效果就可以了！
不妨用before伪元素来实现：
但是这样我们还只是仅仅实现了静态的图片反光，我们希望卡片随鼠标移动时，上面反光的效果也随之而动，那么该怎么做呢？
那么额外引入一个 CSS 变量，基于鼠标当前卡片距离卡片最左侧的横向距离，设置一个动态的 CSS 变量‘—per’
这里我重新写了一下代码：
1 | "en"> "UTF-8"> "viewport" content="width=device-width, initial-scale=1.0"> Card Master "element" id="element"> "yoxi.jpg" alt=""> |
这里面，—per就会随你的光标位置变化而改变，导致图片上“反光条”的位置看似变化（实则比例变化）实现了一定的反光效果。
还想更帅？再叠一层！
除了before，我们还有after呢！再来叠一层吧：
于是——我们得到了：硫磺岛战地小伙限定proMaxBlender至尊星空版：
我们也可以再改变一下before里面的background属性，于是我们可以得到：硫磺岛小伙超级彩虹星空版！
# 总而言之
我们可以尝试改变卡片的形状，你甚至可以创造出属于你自己的一套卡牌集，你也可以尝试去复刻CS里面的各种勋章——拥有自己的一面勋章墙，简直帅爆了·······
你同样可以把样式改的更酷一些······
你也可以尝试将卡片变成双面的······
你也可以将图片换成家人，朋友，&你所想要记住的任何人······
能用一段代码来记住一些瞬间，来用前端技术展现这些瞬间的美，这才是一个真正的赛博卡牌大师！
卡牌大师·崔斯特 友情赞助