用CSS翻轉3D卡片：解決翻轉問題

與許多基於CSS的效果類似，實現3D卡片翻轉動畫需要對變換和背面可見性屬性的全面理解。讓我們深入研究提供的 CSS 並解決為什麼卡片表現出捕捉行為而不是平滑翻轉的問題。

提供的 CSS 將卡片的正面和背面絕對定位在父容器內。透視屬性定義了檢視者的視角，而變換樣式和背面可見性則確保兩個面都被渲染並且可見。 transition屬性指定變換動畫需要1秒鐘。

當遊標懸停在卡片上時，背面的transform屬性更改為rotateY(180deg)。這種旋轉就是導致翻轉效果的原因。然而問題出在背面的初始變換屬性：由於設定為none，旋轉動畫從該狀態開始，導致卡片立即吸附在背面。

達到想要的效果平滑翻轉，我們可以初始化背面旋轉180°。這在開始時將背面定位在所需的“翻轉”狀態。懸停時，我們可以將其進一步旋轉到 360 度，使其完成完整的翻轉。

透過實施這些調整，您可以輕鬆建立基於 CSS 的 3D 卡片翻轉動畫，而不會出現捕捉問題。現在，該卡將在懸停時從正面無縫過渡到背面，從而提供身臨其境且引人入勝的用戶體驗。