---

效果

---

---

---

---

html

<div class="container"><div class="box"><img src="../../image/1_.jpg"></div><div class="box"><img src="../../image/2_.jpg"></div><div class="box"><img src="../../image/3_.jpg"></div><div class="box"><img src="../../image/4_.jpg"></div><div class="box"><img src="../../image/5_.jpg"></div>
</div>

---

style

* {margin: 0;padding: 0;box-sizing: border-box;
}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #1a252c;
}.container {position: relative;display: flex;justify-content: center;align-items: center;transform-style: preserve-3d;
}.container .box {width: 300px;height: 300px;position: relative;transition: .5s;-webkit-box-reflect: below 1px linear-gradient(transparent, #0002);
}.container .box img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;cursor: pointer;
}.container:hover> :not(:hover) {margin: 0 -20px;filter: drop-shadow(0 0 25px #000) drop-shadow(0 0 45px #000);transform: perspective(500px) rotateY(45deg) scale(0.95);
}.container .box:hover~.box {transform: perspective(500px) rotateY(-45deg) scale(0.95);
}.container .box:hover {transform: perspective(500px) rotateY(0deg) scale(1.5);
}

---

scale

MDN

CSS函数scale()用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。

---

:not()

MDN

:not()是CSS的伪类，用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类(negation pseudo-class)。