关于rotate动画在ios设备无效的问题

最新推荐文章于 2024-01-23 15:14:41 发布

原创最新推荐文章于 2024-01-23 15:14:41 发布 · 5.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ios设备 #动画

JavaScript 同时被 3 个专栏收录

2 篇文章

订阅专栏

前端

2 篇文章

订阅专栏

html5

1 篇文章

订阅专栏

在创建扑克牌旋转效果时，遇到一个奇怪的问题：该效果在Chrome和Android设备上正常，但在iOS设备上无法显示。尝试添加CSS前缀并未解决问题。经过一番研究，发现在Safari 8.0及以上版本中，rotate3d不被支持，但rotateX和rotateY是可行的。通过调整代码，最终成功实现了在iOS设备上的旋转动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在一个页面里做一个扑克牌的旋转效果，测试的时候发现，在chrome上和Android设备上旋转效果都是没问题的，但是在ios设备上就完全没效果，这可急坏了宝宝，网上各路大神给的解决方案都是加上-webkit-前缀就可以，但是我试了一下，还是没有效果，之后就开始一路寻找破解方案之路。
这是我开始的代码

.animation3d {
    animation:rotate 0.2s infinite linear;
}
@keyframes rotate{
    0%{
        transform: rotate3d(0,1,0,0deg);
    }
    100%{
        transform: rotate3d(0,1,0,360deg);
    }
}

后来加了前缀

.animation3d {
    -webkit-animation:rotate 0.2s infinite linear;
    animation:rotate 0.2s infinite linear;
}
@-webkit-keyframes rotate{
    0%{
        -webkit-transform: rotate3d(0,1,0,0deg);
    }
    100%{
        -webkit-transform: rotate3d(0,1,0,360deg);
    }
}
@keyframes rotate{
    0%{
        transform: rotate3d(0,1,0,0deg);
    }
    100%{
        transform: rotate3d(0,1,0,360deg);
    }
}

可是加上了之后也无济于事…，在兽兽的帮助下，看了无数个帖子分享和属性说明之后，我对代码做了些微改动

.animation3d {
    -webkit-animation:rotate 0.2s infinite linear;
    animation:rotate 0.2s infinite linear;
}
@-webkit-keyframes rotate{
    0%{
        -webkit-transform: rotate3Y(0deg);
    }
    100%{
        -webkit-transform: rotateY(360deg);
    }
}
@keyframes rotate{
    0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(360deg);
    }
}