CSS 3 中提供了 transform 屬性,可以實現圍繞中心旋轉的效果。
transform: rotate(30deg);
上述代碼可以將一個元素圍繞自己的中心點旋轉 30 度。
如果想要圍繞頁面中心點旋轉,可以通過以下代碼實現:
transform: translate(-50%, -50%) rotate(30deg) translate(50%, 50%);
其中,第一個 translate(-50%, -50%) 會將元素向左和向上移動 50%,讓元素的中心點與頁面中心點重合。旋轉完成后,第二個 translate(50%, 50%) 會將元素向右和向下移動 50%,讓元素回到原來的位置。
如果想要實現動畫效果,可以加上 transition 屬性:
transition: transform 1s ease;
上述代碼會將 transform 屬性的變化設置為 1 秒鐘,同時添加緩動效果。
可以通過 JavaScript 操控 transform 屬性,實現更復雜的動畫效果。
上一篇mysql數據庫系統實現
下一篇css固定位置活滾動