Raphael Rafatpanah Raphael Rafatpanah - 4 months ago 4x
HTML Question

How to make this list item "zoom"

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.


At the moment, I am attempting to use CSS

to move the item closer in the Z direction. However, since the
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
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?


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);