2016-06-21 55 views
0

我想在選擇時使列表項「縮放」。我無法找到實現此目標的最佳方法。我正在使用GSAP,JavaScript工作得很好,但我很難找到哪個屬性最能達到所需的「縮放」效果。如何使這個列表項「縮放」

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

目前,我試圖使用CSS perspectivetranslate3d移動項目在Z方向靠攏。但是,由於perspective-origin位於50% 50%,並且由於列表項在其父容器中居中,所以第一個和最後一個列表項分別向頂部和底部移動。相反,我希望他們都能成爲中間列表項目。

使用像font-size這樣的東西會導致元素根據新的寬度「重新居中」,這是不可取的。

實現「縮放」效果的最佳方法是什麼?

+0

https://jsfiddle.net/Leahp374/2/ – Rayon

+0

@Rayon,謝謝。 JavaScript不是問題。我想知道哪些CSS屬性最適合製作動畫。我剛剛發現它:'scale'。 –

+1

我會以某種方式在'ul'上設置一個寬度。這樣你可以使用'font-size'並讓文本溢出,這樣它就不會_re-center_。 [類似這樣](https://jsfiddle.net/Leahp374/3/)。 – hungerstar

回答

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>

+1

我不知道'轉換原點'。這很棒。謝謝。 –