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);}
如此,测试正常,只写一个。方法不是最优解,能解决问题。当你尝试各种解决方案无效,可以试试