為什麼我的 CSS3 360 度圖片旋轉不起作用？

CSS3 旋轉動畫

您在嘗試將圖片旋轉 360 度時遇到 CSS 問題。提供的 CSS 程式碼似乎在關鍵影格內包含語法錯誤，這會阻止動畫執行。讓我們深入研究問題的具體情況並提供必要的更正。

語法錯誤在於關鍵影格聲明中的「from」和「to」屬性。對於現代瀏覽器，轉換屬性「transform」比「-webkit-transform」和「-moz-transform」等供應商前綴更有效。此外，「to」屬性應該定義為 100%，而不是「from」。

這是修正後的CSS 程式碼：

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}

@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}

@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

在修正後的程式碼中，「from」屬性已被刪除，並且「to」屬性中的變換值已更新為「rotate(360deg)」。此外，關鍵影格規則現在僅使用不含供應商前綴的「變換」。

此修正的 CSS 應該可以解決動畫問題，讓圖片平滑地旋轉 360 度。

以上是為什麼我的 CSS3 360 度圖片旋轉不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！