CSS 圖片旋轉效果是網頁設計常用的特效。它可以為網頁增添活力和美觀的效果，吸引使用者的注意。以下將介紹一些基本的 CSS 圖片旋轉效果的實作方法。
一、利用 CSS3 的 transform 屬性實現旋轉效果
CSS3 提供了 transform 屬性，可以透過旋轉、扭曲、拉伸等多種方式改變元素的形狀和位置。其中最常用的是旋轉效果，透過設定元素的 transform 屬性中的 rotate 值來實現。具體操作如下：
<img src="图片路径" alt="图片描述" class="rotate-img">
.rotate-img {
width: 200px;
height: 200px;
border-radius: 50%;
transition: transform 0.5s ease-in-out; /* 添加过渡效果 */
}
.rotate-img:hover {
transform: rotate(360deg); /* 实现旋转效果 */
}將滑鼠懸停在圖片上，即可實現圖片的旋轉效果。
二、利用 CSS3 的 animation 屬性實現旋轉動畫效果
除了 transform 屬性，CSS3 還提供了 animation 屬性，可以實現更複雜、自由度更高的動畫效果。其中包括了旋轉動畫效果。
<img src="图片路径" alt="图片描述" class="rotate-img">
.rotate-img {
width: 200px;
height: 200px;
border-radius: 50%;
animation: rotate 5s infinite linear; /* 实现旋转动画效果 */
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}透過設定keyframes的from 和to 值，可實現旋轉效果從0 度到360 度循環播放。
以上兩種實作方法都是利用 CSS3 屬性實現的圖片旋轉效果，不僅簡單易懂，而且在各種瀏覽器中均可運作良好。利用這些方法增添網頁的特效，為網頁增加更多活力和美觀度。
以上是css怎麼實現圖片旋轉效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
