解决 iOS 上 transform rotate 兼容问题

用css3 rotate 写旋转动画，web端chrome浏览器没问题，在移动端iOS上动画不生效，打开Safari浏览器，果然不生效；

rotate 难道存在兼容问题？

MDN 上查了下，Safari支持3.1版本，看了眼我的Safari版本，好吧～～

那就做一下兼容吧，给 transform增加上-webkit-前缀；

加好了，发现还是不生效；

查了一下，可能是视角的问题，那给父元素加上perspective 浅试一下吧；

注：perspective ：定义3d元素距视图的距离，该属性允许改变3d元素查看3d元素的视图，当为元素定义perspective属性时，自元素会获得透视效果，而不是元素本身；

结果：动画生效了，经验证，iOS上均可；

解决方案：

父元素：
transform: perspective(400px);
-ms-transform: perspective(400px);
-moz-transform: perspective(400px);
-webkit-transform: perspective(400px);
-o-transform: perspective(400px);子元素：
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);

解决 iOS 上 transform rotate 兼容问题相关推荐

微信小程序解决ios端时间格式兼容的问题
微信小程序获取当时时间new Date时,会在ios真机上出现问题,具体表现为时间格式会报错并显示出NaN.这个bug并不会在模拟器和安卓系统出现,只会在ios系统上出现,具体原因是ios不支持符号 ...
transform:rotate兼容
1.transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 / -webkit-transform:rotate(30deg); / ...
解决ios上数字变成蓝色的问题
< meta name = "format-detection" content="telephone = no" /> 在ios上数字在一起可能会 ...
iOS上应用如何兼容32位系统和64位系统
在苹果推出iPhone5S时,64位的应用就走到了眼前.当时就看见苹果官方资料宣布iOS7.x的SDK支持了64位的应用,而且内置的应用都已经是64位. 我记得自己刚刚接触电脑时还有16位的系统,指针 ...
SwiftUI 实现一个 iOS 上 Files App 兼容的文件资源管理器
功能需求在 SwiftUI 中自己白手起家写一个 iOS(或iPadOS)上迷你的文件资源管理器是有些难度滴,不过从 iOS 11 (2017年) 官方引入自家的 Files App 之后,我们就 ...
解决ios上audio不能自动播放的问题以及监听audio播放状态
最近做了个H5产品的宣传活动,用到了audio标签并且要求自动播放,我们都知道safri on ios里面明确指出等待用户的交互动作后才能播放media,也就是说如果你没有得到用户的action就播放 ...
uniapp 解决ios上拉下拉白边处理
ios设备在微信小程序中使用不管是向下拉到底还是向上拉到底都会出现一个白色边框,底色是白色背景的用户可能这也无所谓看不出来,但项目遇到深色一点的使用户体验非常不好解决方案加page.jso ...
解决iOS 上拉边界下拉出现白色空白
起因: 如标题所示,还被运营吐槽了,为什么别人的没有解决: body,html {width: 100%;height: 100%;position: fixed;top: 0;right: 0;b ...
前端调用百度地图API，解决ios上地图不显示、https访问不了等问题
注册申请百度地图ak 不会的童鞋们点链接这里还是说一下注册的时候要注意的白名单填写项,如不确定直接写 * 号下面说具体操作在页面引入js文件 <script type="text ...

解决 iOS 上 transform rotate 兼容问题

解决 iOS 上 transform rotate 兼容问题相关推荐

最新文章

热门文章