如何使此列表项“缩放”答案

【问题标题】：How to make this list item "zoom"如何使此列表项“缩放”
【发布时间】：2016-06-21 20:16:36
【问题描述】：

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

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

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

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

【问题讨论】：

jsfiddle.net/Leahp374/2
@Rayon，谢谢。 javascript不是问题。我想知道什么 CSS 属性最适合制作动画。不过我刚刚找到它：scale.
我会以某种方式在ul 上设置一个宽度。这样您就可以使用font-size 并让文本溢出，这样它就不会重新居中。 Something like this.

标签： javascript jquery html css gsap

【解决方案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>

【讨论】：

我不知道transform-origin。这很棒。谢谢。