Question

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

目前，我正在尝试使用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>

如何使这个列表项“缩放”

1 个答案: