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旋转同时位移处理》对你有帮助，请点赞、收藏，并留下你的观点哦！
