如何解决Safari 错误与变换结合旋转和平移
我需要制作一个旋转轮,到目前为止它在响应式等方面的镀铬中运行良好,但问题在于响应式我必须将轮子居中,我使用变换平移(-50%)并将其与旋转结合(360 * 3 + randomNumber(0 -- 360)) 在轮子上得到一个下降的旋转和一个随机目标。
在 chrome 上我工作正常,轮子转动,但在移动 safari 上,它只转动一点对应于“randomNumber(0 -- 360)”
这是代码,通过悬停进行了简化,因为实际项目更“凌乱”,并且悬停时也存在错误
body{
width: 100vw;
height: 100vh;
display: grid;
place-content: center;
background: #444444;
}
.spin{
width: 400px;
height: 400px;
background: red;
transition: 6s ease;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.spin:hover{
transform: translateX(-50%) rotate(1100deg);
-webkit-transform: translateX(-50%) rotate(1100deg);
}
如果你想在家尝试,我已经设置了 1100 度进行测试,但车轮只会在 6 秒内旋转 20 度,因为 1100 - 360 * 3 = 20 度
希望有人能解决,谢谢大家
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。