在CSS中,要使正方形等比縮放,可以使用transform
屬性中的scale()
函數(shù)。scale()
函數(shù)可以接收兩個參數(shù),分別代表水平和垂直方向的縮放比例,當(dāng)兩個參數(shù)相等時,正方形將等比縮放。
要將一個正方形等比放大2倍,可以使用以下CSS代碼:
.square { width: 100px; height: 100px; transform: scale(2, 2); }
在這個例子中,square
類定義了一個寬度和高度都為100px的正方形。transform: scale(2, 2)
將正方形等比放大2倍。
如果要等比縮小正方形,可以將縮放比例設(shè)置為小于1的值,要將正方形等比縮小到原來的0.5倍,可以使用以下CSS代碼:
.square { width: 100px; height: 100px; transform: scale(0.5, 0.5); }
在這個例子中,transform: scale(0.5, 0.5)
將正方形等比縮小到原來的0.5倍。
需要注意的是,scale()
函數(shù)不會改變元素的其他屬性,如顏色、邊框等,如果需要改變其他屬性,可以在transform
屬性中添加其他函數(shù)或值。