admin管理员组文章数量:1642937
safari浏览器兼容css3旋转同时位移处理
项目某元素同时执行 位移+旋转时,谷歌浏览器等其他浏览器正常,safari浏览器不兼容(pc和苹果手机一样)
网络方案 (一)
(亲测 然并卵 ~~)
旋转元素的父级元素加入perspective
.father {
transform: perspective(400px);
// 为啥是400? 因为animate.css中flipInX用到的就是400;我这里是引用了 animate.css 所以 根据它的设定我也设定了400
}
网络方案 (二)
初始声明时候,没带初始样式
初始:
.el{
-webkit-transition: ease-out 2.5s;
-ms-transition: ease-out 2.5s;
-moz-transition: ease-out 2.5s;
-o-transition: ease-out 2.5s;
transition: ease-out 2.5s;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
旋转+位移:
.elTransform{
-webkit-transform: translate(-50%, -50%) rotate(360deg);
-moz-transform: translate(-50%, -50%) rotate(360deg);
-o-transform: translate(-50%, -50%) rotate(360deg);
-ms-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
初始化样式不要缺失
初始:
.el{
-webkit-transform: translate(-50%, -50%) rotate(0);
-moz-transform: translate(-50%, -50%) rotate(0);
-o-transform: translate(-50%, -50%) rotate(0);
-ms-transform: translate(-50%, -50%) rotate(0);
transform: translate(-50%, -50%) rotate(0);
}
但是:
如果你的项目还没解决的继续看
拆分 transform
经测试,单个位移、或者旋转 safari 浏览器执行正常
拆解:
- 位移使用定位代替
- transform只写rotate角度
修改后:
.el {
width: 60%;
heigt: 60%;
position: absolute;
top: 20%;
left: 20%;
}
.elTransform {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
如此,测试正常,只写一个。方法不是最优解,能解决问题。当你尝试各种解决方案无效,可以试试
版权声明:本文标题:safari浏览器兼容css3旋转同时位移处理 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1725200077a1012846.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论