How to make this list item "zoom"
<p>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.</p>

<p><a href="https://jsfiddle.net/Leahp374/1/" rel="nofollow">https://jsfiddle.net/Leahp374/1/</a></p>

<p>At the moment, I am attempting to use CSS <code>perspective</code> and <code>translate3d</code> to move the item closer in the Z direction.  However, since the <code>perspective-origin</code> is at <code>50% 50%</code>, 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.</p>

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

<p>What is the best way to achieve the "zoom" effect?</p>