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旋转同时位移处理相关推荐

Css3旋转、位移、缩放、倾斜动画
rotate:旋转 skew:倾斜 sacle:缩放 translate:位移 <!DOCTYPE html> <html><head><meta chars ...
html5新特性移除哪些,html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？...
(1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...
CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
IE8上面的旋转和透明度，利用滤镜属性去处理（兼容css3的transform和rgba()）
1.关于在IE浏览器上面的一个旋转问题 IE8不支持css3的transform属性,因此在兼容ie8的时候需要用到滤镜来进行兼容语法: 兼容c3属性的浏览器在设置旋转属性的时候: transfor ...
各大浏览器兼容性报告 IE、FF、Safari、OP不同浏览器兼容报告
IE.FF.Safari.OP不同浏览器兼容报告分类:UI前端設計2011-12-05 17:01323人阅读评论(0)收藏举报 IE.FF.Safari.OP不同浏览器兼容报告 1浏览器内核简介 ...
IE、FF、Safari、OP不同浏览器兼容报告[转]
IE.FF.Safari.OP不同浏览器兼容报告 1 浏览器内核简介 Trident IE浏览器(GreenBrowser绿色浏览器, 遨游浏览器....都是IE) Geckos Fi ...
转载： IE、FF、Safari、OP不同浏览器兼容报告
(文章出处:http://blog.csdn.net/painsonline/article/details/7466777) IE.FF.Safari.OP不同浏览器兼容报告 1 浏 ...
Css3动画浏览器兼容问题
Css3动画属性浏览器兼容的写法在css发展的过程中,当一些新得css属性刚出来的时候,还没有成为业界认可的标准(有可能永远都不会成为标准),于是各个浏览器开发者选择采用一些用于自己测试的属性,这些 ...
safari浏览器的兼容
样式尽量减少margin-left的使用,safari浏览器环境下样式会重新排列,使用定位的方法进行排版 safari浏览器很多样式并不兼容尽量使用定位

safari浏览器兼容css3旋转同时位移处理

safari浏览器兼容css3旋转同时位移处理

网络方案（一）

网络方案（二）

拆分 transform

safari浏览器兼容css3旋转同时位移处理相关推荐

最新文章

热门文章

safari浏览器兼容css3旋转同时位移处理

safari浏览器兼容css3旋转同时位移处理

网络方案 （一）

网络方案 （二）

拆分 transform

safari浏览器兼容css3旋转同时位移处理相关推荐

最新文章

热门文章

网络方案（一）

网络方案（二）