CSS3是指層疊樣式表第3個版本,它提供了許多新的功能和特性。其中,放大和旋轉是兩個非常有用的特性。我們可以使用CSS3實現在鼠標懸停時放大和旋轉圖像/元素的效果。
首先,我們需要在CSS3中使用transform屬性,并設置scale和rotate的值。其中,scale的值用于控制放大的大小,取值范圍從0到無窮大。rotate的值用于控制旋轉的角度,取值范圍從0到360度。
img:hover { transform: scale(1.3) rotate(45deg); }
上述代碼表示,在用戶將鼠標指針放在img元素上時,它將被放大1.3倍,并逆時針旋轉45度。
如果我們想只實現放大或旋轉效果,可以只設置其中一個屬性的值。
img:hover { transform: scale(1.3); }
上述代碼表示,在用戶將鼠標指針放在img元素上時,它將被放大1.3倍。
img:hover { transform: rotate(45deg); }
上述代碼表示,在用戶將鼠標指針放在img元素上時,它將逆時針旋轉45度。
除了img元素之外,我們還可以使用這些特性來放大和旋轉其他HTML元素,如div和span等。只需將CSS代碼應用于所需元素即可。
總之,CSS3提供了非常強大和有用的放大和旋轉特性,只需要簡單的CSS代碼即可實現各種效果。