为什么我的 CSS3 360 度图像旋转不起作用？-css教程-PHP中文网

为什么我的 CSS3 360 度图像旋转不起作用？

Barbara Streisand

发布： 2024-12-17 06:30:25

原创

766 人浏览过

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

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中文网其他相关文章！