このリストアイテムを「ズーム」にする方法

Question

リストアイテムを選択すると「ズーム」するようにしようとしています。これを実現させる最善の方法を見つけるのが難しいです。私はGSAPを使用しており、javascriptは正常に動作していますが、目的の「ズーム」エフェクトを最も良く達成するプロパティを見つけるのは苦労しています。現時点で

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

、私は近いZ方向にアイテムを移動するためにCSS perspectiveとtranslate3dを使用しようとしています。ただし、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>