旋轉圖片顯示是網頁設計常用的特效之一。在CSS中,通過transform屬性的rotate參數實現圖片旋轉效果。下面是一個簡單的樣例:
.rotate { transform: rotate(45deg); } <img src="example.jpg" class="rotate" alt="example" />
上面的代碼中,旋轉角度為45度,可以根據需要進行調整。需要注意的是,旋轉效果是以元素中心進行旋轉的,因此需要使用position屬性來調整圖片的位置,使其旋轉后不超出頁面范圍。例如:
.rotate { transform: rotate(45deg); position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; }
上面的代碼中,position屬性設置為absolute,top和left屬性分別為50%,表示圖片的中心點位于頁面正中央。width和height屬性設置為200px,表示圖片的寬度和高度。margin-top和margin-left屬性分別為負數的一半,表示將圖片向上向左移動其寬高的一半,使其居中。
除了rotate參數外,CSS的transform屬性還支持其他參數,如scale(縮放)、translate(移動)、skew(斜切)等。通過組合這些參數,可以實現更豐富的圖片特效。
下一篇html5代碼增加鏈接