CSS圖片放大2倍需要使用CSS transform屬性,具體方法如下:
img:hover { transform: scale(2); }
上述代碼表示當(dāng)鼠標(biāo)懸停在圖片上時,圖片會放大2倍。其中transform是CSS3中的屬性,可以用來對元素進行旋轉(zhuǎn)(rotate)、縮放(scale)、傾斜(skew)和移動(translate)操作。
除了使用hover偽類,也可以直接給圖片添加class,并通過JavaScript控制。代碼如下:
HTML: CSS: .zoomable { transition: transform .5s ease-in-out; } .zoom { transform: scale(2); }
上述代碼中,給圖片添加了class zoomable,并設(shè)置了過渡效果。當(dāng)通過JavaScript給該圖片添加class zoom時,圖片會放大2倍,過渡效果也會自動顯示。
需要注意的是,CSS transform屬性只是改變元素的顯示效果,而并不會影響元素在文檔流中的位置。如果需要改變元素的位置,還需要使用CSS position屬性。
上一篇css圓角怎么樣
下一篇java語言中,n和t