如何制作此列表项 "zoom"

Question

我正在尝试在选中时创建列表项 "zoom"。我很难找到实现这一目标的最佳方法。我正在使用 GSAP，javascript 工作得很好，但我很难找到哪个属性最能达到预期的 "zoom" 效果。

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

使用 font-size 之类的东西会导致元素 're-center' 基于它的新宽度，这是不可取的。

实现 "zoom" 效果的最佳方法是什么？

Answer 1

这是您想要的 'zoom' 效果吗？您可以使用缩放变换和变换原点来获得所需的缩放效果。

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>

如何制作此列表项 "zoom"

How to make this list item "zoom"

html

javascript

css

jquery

gsap