CSS中設(shè)置元素的大小是一項(xiàng)非常重要的任務(wù),其中之一就是設(shè)置元素的放大。放大元素可以讓頁(yè)面更加炫酷并且更符合設(shè)計(jì)師的要求。
.enlarge { transform: scale(1.2); }
上述代碼即是設(shè)置一個(gè)class名為enlarge的元素進(jìn)行放大,放大比例為1.2倍。其中,transform是css3新特性中可用于設(shè)置各種變換效果的屬性,比如這里的scale表示縮放變換。
如果需要設(shè)置超過(guò)一倍的放大效果,只需將1.2改為更大的數(shù)字即可,如2.0。
除了使用transform來(lái)實(shí)現(xiàn)放大元素,還可以使用zoom屬性。zoom屬性是IE特有的一個(gè)屬性,在IE瀏覽器中幾乎被所有版本支持,但其他瀏覽器不一定支持。
.enlarge { zoom: 1.2; /* IE瀏覽器中放大1.2倍 */ }
上述代碼中,zoom屬性值為1.2即可實(shí)現(xiàn)在IE瀏覽器中放大元素1.2倍(前提是該元素的position屬性設(shè)置為relative或absolute,否則zoom屬性在IE瀏覽器中不會(huì)生效)。
需要注意的是,在使用zoom屬性時(shí),不要將zoom放在transform的前面,否則IE中的縮放效果會(huì)失效。
綜上所述,不同的瀏覽器中設(shè)置放大元素的方式不同,而CSS中的transform屬性則可以用于非常炫酷的動(dòng)效展示。