javascript - 如何使此列表项为 "zoom"

Question

我试图在选择时使列表项“缩放”。我很难找到实现这一目标的最佳方法。我正在使用 GSAP 并且 javascript 工作正常，但我很难找到哪个属性最能实现所需的“缩放”效果。

https://jsfiddle.net/Leahp374/1/

目前，我正在尝试使用 CSS perspective 和 translate3d 将元素在 Z 方向上移动得更近。但是，由于 perspective-origin 位于 50% 50%，并且由于列表项在其父容器中居中，因此第一个和最后一个列表项移向顶部和底部，分别。相反，我希望它们都表现为中间列表项。

使用类似font-size 的东西会导致元素根据它的新宽度“重新居中”，这是不可取的。

实现“缩放”效果的最佳方式是什么？

Answer 1

这是您正在寻找的所需“缩放”效果吗？ 您可以使用缩放变换和变换原点来获得所需的缩放效果。

html, body {
  height: 100%;
}

div {
  perspective: 600px;
  width: 100%;
  height: 100%;
  background: red;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

li:nth-child(1) {
  transform: scale(1.5);
   transform-origin:-40%;
}

<div>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>