如何使此列表项“缩放”

Question

I am trying to make list items "zoom" when selected. I'm having trouble finding the best way to make this happen. I'm using GSAP and the javascript is working just fine, but I'm having a hard time finding which property would best achieve the desired "zoom" effect.

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

At the moment, I am attempting to use CSS perspective and translate3d to move the item closer in the Z direction. However, since the perspective-origin is at 50% 50% , and since the list item is centered in its parent container, the first and last list items move towards the top and bottom, respectively. Instead, I'd like them to all behave as the middle list item.

Using something like font-size will cause the element to 're-center' based on it's new width, which is not desirable.

What is the best way to achieve the "zoom" effect?

Answer 1

Is this the desired 'zoom' effect that you are looking for? You can use scale transform along with transform origin to get the desired zoom effect.

 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>