如何在縮放時保持圖像中心恆定
使用 CSS 動畫縮放元素時，保持居中位置至關重要。然而，在某些情況下，縮放後的元素可能會偏離中心，如提供的小提琴所示。
根本問題是由動畫覆蓋原始平移轉換引起的。在動畫中指定新的變換時，它會掩蓋初始定位，從而刪除中心對齊所需的平移。
要修正此問題，必須將兩個變換組合在同一屬性中，確保正確的順序：初始平移後跟隨縮放動畫。下面更新的程式碼片段示範了這種方法：
@keyframes ripple_large {
0% {
transform: translate(-50%, -50%) scale(1);
}
75% {
transform: translate(-50%, -50%) scale(3);
opacity: 0.4;
}
100% {
transform: translate(-50%, -50%) scale(4);
opacity: 0;
}
}透過遵循此順序，元素在整個縮放動畫中保持準確居中，保留其相對於其父元素的預期位置。
以上是如何在 CSS 縮放動畫期間保持圖片居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
