共计 1676 个字符，预计需要花费 5 分钟才能阅读完成。
明天要实现的成果如图所示，鼠标悬停是图片卡片会有 3D 翻转的成果，且动画过程中还带有发光的成果。相似这种 3D 悬停成果日常看到的比拟多，然而明天实现的这个成果有以下几个亮点：
- 外围 CSS 代码不超过 10 行
- 没有额定的元素（只有
<img>标签） - 没有伪元素
整个交互过程次要就两个性能点：
- 鼠标悬停时卡片 3D 翻转
- 鼠标悬停时发光的成果
卡片 3D 翻转
开启 3D 成果须要用到 perspective 属性，通过设置 perspective 属性，咱们能够扭转元素在三维空间中的体现形式，使其看起来更加真切和立体化。该属性会创立一个视角，在这个视角下，间隔视点近的元素看起来比间隔视点远的元素更大。
开启了 3D 模式则须要应用 rotate3d 将元素进行 3D 变换，这里应用 transform 实现，能够将 perspective 和其余 transform 函数一起应用，使代码更加简洁易懂。这里实现卡片 3D 翻转的外围代码如下：
transform: perspective(400px) rotate3d(var(--r, 1, -1, 0), calc(var(--i, 1) * var(--a)));perspective(400px) 将元素视图设置为离观察者 400 像素的地位。
rotate3d() 函数能够用来将一个元素依照指定方向旋转。它的四个参数别离是 x 轴、y 轴、z 轴和旋转角度。
在这里第一个参数 var(--r, 1, -1, 0)，如果该变量未定义则应用默认值 1, -1, 0。在这里并没有定义--r，所以也是等同于就是设置了 1, -1, 0。即示意元素将围绕 x 轴、y 轴产生不同的旋转方向，z 轴则不发生变化。
第二个参数 calc(var(--i, 1) * var(--a)) 是一个计算式，示意实时计算元素旋转的角度。其中 --i 变量默认为 1，这里咱们定义了 --a 是 8deg，所以最终旋转的角度是 8deg。
当鼠标悬停时，咱们只须要扭转 --i 变量的值，即可使卡片产生 3D 的成果。这里咱们设置悬停时的值是 -1，所以最终卡片的旋转角度会在 8deg 和 -8deg 之间。
img:hover {--i: -1;}最初再配合 transition: .4s 过渡动画，此时咱们的卡片成果如下：
悬停发光成果
下面提到只应用 img 标签也不应用伪元素，那么从图片上方一闪而过的光束是怎么实现的呢？
这里咱们应用 CSS 的 -webkit-mask 属性，用于实现遮罩成果。刚好能够满足这个需要点，外围应用的代码如下：
-webkit-mask:
linear-gradient(135deg,#000c 40%,#000,#000c 60%)
100% 100%/250% 250%;具体解析如下：
linear-gradient(135deg, #000c 40%, #000, #000c 60%)：创立一个线性突变，从左上角到右下角，顺次通过彩色半透明、全黑和彩色半透明三个色彩阶段。其中，色彩值#000c一个十六进制颜色代码示意彩色半透明，#000示意全黑。100% 100%：指定背景图像的偏移量，行将背景定位到容器的右下角。/250% 250%：指定背景图像的大小，行将背景图像程度方向和垂直方向都扩充到容器宽高的 2.5 倍。
以上代码实现了一个线性突变遮罩，笼罩在咱们的图片元素上，同时通过偏移和大小设置，让遮罩铺满整个元素，并且向周围扩散。此时咱们再减少鼠标悬停的代码：
img:hover {-webkit-mask-position: 0 0;}当鼠标悬停时，将遮罩层的偏移量都设置为 0，此时再配合 transition: .4s 过渡动画悬停时发光的成果就动起来啦。
在线预览
https://code.juejin.cn/pen/7244472462694416436
最初
看到这里是不是感觉挺简略的，外围代码就这么几行即实现了看似比较复杂的交互成果。感兴趣的能够本人尝试实现看看。
看完本文如果感觉有用，记得点个赞反对，珍藏起来说不定哪天就用上啦～
专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）
参考
https://css-tip.com/3d-shine-effect/