在CSS中,可以使用transform屬性對元素進行縮放操作。其中,沿原點進行縮放操作可以通過設(shè)置scaleX和scaleY屬性值實現(xiàn)。假設(shè)要將一個元素在水平方向上縮小到原來的一半,可以這樣設(shè)置:
transform: scaleX(0.5);
而在垂直方向上縮小到原來的一半,則可以這樣設(shè)置:
transform: scaleY(0.5);
若想同時在水平和垂直方向上縮放到原來的一半,可以這樣設(shè)置:
transform: scale(0.5);
需要注意的是,這些操作默認都是以元素的中心點進行縮放。如果希望從左側(cè)或頂部開始縮放,則可以通過在transform-origin屬性中指定相應(yīng)的值實現(xiàn)。比如,以下代碼將元素以左側(cè)中心點開始縮放到原來的一半:
transform: scaleX(0.5); transform-origin: left center;
最后,需要說明的是,這些縮放操作都是相對于元素自身的原點進行的。如果希望以頁面的原點作為縮放起點,則需要將元素的位置設(shè)置為fixed,并將left、top屬性值都設(shè)置為0。否則,縮放操作還是會以元素自身的原點為基準(zhǔn)。
上一篇css超出部分取反
下一篇汽車css成績什么意思