Why Isn't My CSS3 360-Degree Image Rotation Working?

CSS3 Rotate Animation

You are encountering issues with your CSS while attempting to rotate an image 360 degrees. The provided CSS code appears to include a syntax error within the keyframes, which prevents the animation from executing. Let's delve into the specifics of the problem and provide the necessary corrections.

The syntax error lies in the 'from' and 'to' properties within the keyframes declarations. For modern browsers, the transformation property 'transform' works more effectively than vendor prefixes like '-webkit-transform' and '-moz-transform'. Moreover, the 'to' property should be defined at 100% instead of 'from'.

Here's the corrected CSS code:

.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); 
    } 
}

In the corrected code, the 'from' property has been removed, and the transformation value in the 'to' property has been updated to 'rotate(360deg)'. Additionally, the keyframes rules now only use 'transform' without vendor prefixes.

This corrected CSS should resolve the animation issue, allowing the image to rotate 360 degrees smoothly.

The above is the detailed content of Why Isn't My CSS3 360-Degree Image Rotation Working?. For more information, please follow other related articles on the PHP Chinese website!