CSS縮放原點是指從什么位置開始進行縮放,常用的有四個值:左上角、中心點、右下角和指定點。默認情況下,縮放發生在元素的中心點位置。
transform-origin: left top; /*左上角為縮放原點*/ transform-origin: center; /*中心點為縮放原點*/ transform-origin: right bottom; /*右下角為縮放原點*/ transform-origin: 100px 50px; /*指定點為縮放原點*/
在實際應用中,根據需求選擇合適的縮放原點可以更好的實現效果。比如,將縮放原點設置為左上角時,元素的位置不會發生改變,只有寬高變化;將縮放原點設置為右下角時,元素的位置也會隨之改變。
值得一提的是,通過縮放原點的控制,我們可以制作出很多有趣的效果,比如心跳、波動等。
.heart { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: beat 1s ease infinite; transform-origin: center bottom; } @keyframes beat { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
上述代碼是一個最簡單的心跳動畫,其中通過將縮放原點設置在元素中心下方,使元素在縮放時可以更好的模擬心跳效果。