关于transform:rotate()在ios上不生效的坑

最新推荐文章于 2024-01-23 15:14:41 发布
最新推荐文章于 2024-01-23 15:14:41 发布
阅读量1.2w 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/THINK_OF_/article/details/81274683
本文介绍了一个关于CSS3 rotate属性在iOS设备上的兼容性问题及解决方案。作者最初发现rotate动画在iOS设备上无法正常显示，在尝试添加-webkit-前缀无效后，通过设置父元素的perspective属性成功解决了该问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题：今天使用css3的rotate做旋转动画，在浏览器里面调试没问题，自己手机上也测试了一番（小米机）都没有问题，让ui访问我的地址看一下满意不，结果发现在ios手机上显示不出来。。。

猜想：rotate存在兼容问题？

测试：查了一下资料，给@keyframes和transform增加上-webkit-前缀来做兼容

结果：ios手机还是毫无效果。。

继续猜想：查一下资料，猜测是不是视角的问题？

测试：在旋转的父元素上面增加transform: perspective(1000);（想了解perspective属性请看http://www.w3school.com.cn/cssref/pr_perspective.asp）

结果：ios手机上元素出现并且开始旋转了，问题解决

解决 iOS 上 transform rotate 兼容问题
鲸落
08-18 3197
用css3 rotate 写旋转动画，web端chrome浏览器没问题，在移动端iOS上动画不生效，打开Safari浏览器，果然不生效； rotate 难道存在兼容问题？
关于rotate动画在ios设备无效的问题
moliy的前端学习日常
06-30 5601
最近在一个页面里做一个扑克牌的旋转效果，测试的时候发现，在chrome上和Android设备上旋转效果都是没问题的，但是在ios设备上就完全没效果，这可急坏了宝宝，网上各路大神给的解决方案都是加上-webkit-前缀就可以，但是我试了一下，还是没有效果，之后就开始一路寻找破解方案之路。
小程序 奇葩BUG 更新~
悟空—
07-19 713
1.如果swiper-item中使用了image组件需要加上webp=‘true’并添加图片的长宽。但是苹果手机真机测试时出现BUG只显示前两个swiper-item关闭手机重新打开手机又渲染出来。用户在小程序“客服会话按钮”进入客服会话时服务端可监听到同时可获取到session-from。IOS设置animation动画设置opacity会出现底部闪烁一下暂无找到更加方案。2.如果swiper-item中使用了text组件需要将text更改为view或其他。............
解决问题之四：transform的rotate在内联元素上面不起作用
qq_29954811的博客
05-24 3759
想让箭头旋转向上 问题：直接引用transform: rotate(270deg);不起效 解决：加入display: inline-block; 产生原因：内联元素使用transform的rotate属性不起作用,这时可以将元素设置为inline-block或者block ...
transform rotate()在ios上不生效
成长笔记
07-30 2014
1.transform 兼容写法 -ms-transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); -o-transform:rotateY(180deg); /* Opera */ 解决方法能 在父元素上 transform: perspective(1000); ...
关于transform rotateY()手机端不显示的问题
Cooky的博客
08-20 2367
使用transform rotateY(180deg)将元素反转，电脑端查看没有问题，用iphone手机查看，元素不显示？？？（安卓手机没有看） 然后找了一些方法都没有效果，以下方法亲测可用 在父元素设置perspective，如下 .father { perspective:1000; // 在这里添加 .childeren { transform: ro...
writing-mode: sideways-rl; 在uniapp中开发安卓app时不生效
最新发布
03-25
接下来，用户提到在安卓APP上不生效，而iOS可能正常。这可能是因为安卓的WebView版本较低，不支持sideways-rl这个值。需要确认哪些浏览器或版本支持这个属性。查阅资料发现，sideways-rl和sideways-lr的支持度确实...
writing-mode: sideways-rl; 在uniapp中不生效
03-25
因此，在UniApp中，由于底层使用的是各平台的原生WebView（如iOS的WKWebView、Android的WebView），可能不支持这个属性，导致样式无效。 然后，用户可能是在UniApp的样式文件中尝试了`writing-mode: sideways-rl;`...
ios10以下safari设置style无效的解决方法
08-26
在iOS10以下的Safari浏览器中，设置style时可能会遇到无效的问题，这主要是由于Safari内核的BUG所致。在本文中，我们将介绍如何解决这个问题。 首先，让我们来看一下问题的出现原因。在项目中，我们可能会遇到点击...
transform: translate在IOS下失效
weixin_44240581的博客
04-02 1793
样式如下 .ant-progress { margin-top: 30px; position: relative; left: 50%; transform: translateX(-50%); } 在安卓中，效果如下 在IOS中，效果如下 解决办法： 网上找不到比较好的方法，所有选择曲线救国，在外面套个Div，用伸缩布局实现居中 <div style={{ display: 'flex', width: '100%', justi
ios 手机上 transform:rotateY闪现一下或者不显示
Armof的博客
01-23 670
【代码】ios 手机上 transform:rotateY闪现一下或者不显示。
2021-08-19 记录transform 在iOS无效
qq_43258134的博客
08-19 1098
记录一下transform 在iOS 不生效的问题 //在父元素加上这一句 perspective: 1000;
ios下使用动画 transform: translate(xx%) 无效问题
Vincentyun
08-06 2856
<div class="wg-marquee-up"></div> .wg-marquee-up { height:300px; -webkit-animation: marquee-up 5s linear infinite; -ms-animation: marquee-up 5s linear infinite; -o-animation: marquee-up 5s linear infinite; animation: marq
ios-transform的rotated的应用
rv0p111
09-30 1022
在Swift我们可能都使用过self.iconView.transform.rotated(by: CGFloat(2*Double.pi))，这个代码，然而如果我们直接这么写，这个view是不会旋转的，因为这个旋转动画的特点就是顺时针优先的原则和就近原则，比如你正好让它转一圈，它觉得呆着不动挺好了，就不会去转了，这个时候如果我们稍微改变下旋转的角度就不一样了，还有就是如果我们想要改变旋转控件的方
transform:rotate在ios上旋转内容消失
CamilleZJ的博客
04-21 2119
最近在做愚人节的活动编写了一个导航组件，如下两个页面共用同一导航组件： 如上第一个导航按钮和最后一个图片资源只给一半 另一半是旋转实现的，最后一个不仅旋转了按钮还旋转了文字 实际测试网页正常，手机android正常，到ios上第二个页面上的最后一个导航按钮：幸运奖池未选中状态消失，点击选中状态会出现： 虽然最后一个导航按钮均是应用了transform:ro...
ios 加载html图片变形,CSS 使用object-fit来避免图片变形
weixin_33722350的博客
06-05 572
HTML导入代码模板：CSS object-fitoriginal images img { width: 200px; height: 200px; border: 1px solid; background: #eee; } Images squishedPrevious style + img { object-fit: contain } Imag...
CSS-transform:rotate()没效果
weixin_46479909的博客
10-25 1332
原因：CSS的rotate只对block或inline-block类型元素有效。可以把元素设为display:inline-block行内块元素。
解决CSS transform:rotate；无效
m0_52364694的博客
06-01 3264
CSS的rotate只 对block或 inline-block类型元素有效
解释一下 这些属性 <style> .watermark { position: relative; z-index: 99; font-size: 20px; font-weight: bold; color: #ccc; opacity: 0.5; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); } </style>
06-09
- `-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);`：这些属性是为了兼容不同的浏览器，以支持它们自己的样式表扩展。在这个...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值