-
Safari transform rotate 不兼容问题及解决
2019-06-17 09:43:12Safari transform rotate 不兼容问题及解决 转自:https://lunashu.org/safari-transform-rotate-bu-jian-rong-wen-ti-ji-jie-jue/ 问题 移动端写CSS3 时 发现在safari 上 一个元素使用了 transform:rotateY(19deg...Safari transform rotate 不兼容问题及解决
转自:https://lunashu.org/safari-transform-rotate-bu-jian-rong-wen-ti-ji-jie-jue/
问题
移动端写CSS3 时 发现在safari 上 一个元素使用了 transform:rotateY(19deg); 显示有问题。当然 不仅仅是 rotateY, 所有跟rotate有关的都有可能出现问题,当然包括rotate3d。
比如这样.css { -webkit-transform: rotateX(-33deg) rotateY(-50deg); transform: rotateX(-33deg) rotateY(-50deg); }
表现
这是正常状态的表现:
这是不正常的表现:
以及页面滚动时:
问题出现了,图片不见了,就算可见也是缺一角!
于是寻求baidu google。。。。终于看到了相似问题解决方案
试着 在父类元素上添加 perspective
先来看看它的介绍定义和用法
perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。
注释:perspective 属性只影响 3D 转换元素。于是乎我在 父级元素加入perspective
.father { transform: perspective(400px); // 为啥是400? 因为animate.css中flipInX用到的就是400;我这里是引用了 animate.css 所以 根据它的设定我也设定了400 }
然后。。。你去看看吧。。。反正就是。。。解决了!没毛病!
-
使用CSS3 transform rotate 出现锯齿效果的解决办法
2019-02-28 14:02:30今天,有朋友在学习CSS3的时候碰到了点问题,transform rotate之后出现了一个和背景颜色同色的 “边框” 。 刚看到的时候,也是很好奇,我还没他学的这么仔细,都没遇到过这个问题。 参考:CSS3 transform rotate...今天,有朋友在学习CSS3的时候碰到了点问题,transform rotate之后出现了一个和背景颜色同色的 “边框” 。
刚看到的时候,也是很好奇,我还没他学的这么仔细,都没遇到过这个问题。
参考:CSS3 transform rotate(旋转)锯齿的解决办法
transform:rotate在手机上显示有锯齿的解决方案大全
这篇文章仅讨论锯齿问题。
解决:
1. 在CSS3 transform属性后加入translateZ(0)
2. 手机上,利用元素外层容器的overflow:hidden; 加上元素margin:-1px;
3. 无需border时,元素border属性颜色设置成 transparent 或者和背景色相同
详细:
代码如下:<!DOCTYPE html> <html> <head> <title>分享图标</title> <style> * { margin: 0; padding: 0; } .container { position: relative; margin: 5% auto; border: 1px solid #cccccc; width: 300px; height: 300px; } .bor { position: relative; top: 2%; left: 40%; width: 40%; height: 40%; border: 25px solid white; transform: rotate(45deg); -webkit-transform: rotate(45deg); background-color: black; } </style> </head> <body> <div class="container"> <div class="bor"> </div> </div> </body> </html>
发现 “边框” 的颜色和背景色相同,元素各值正常如下,并且元素本身已经border,便觉得可能是本身渲染的问题。
经查阅资料,有以下三个方法:1. 在CSS3 transform属性后加入translateZ(0)
这是在本例中,最方便的解决办法。
使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果。
GPU加速是在IE9时才加入的,所以兼容性上有点问题。2. 利用元素外层容器的overflow:hidden; 加上元素margin:-1px;
修改代码,尝试了一下:
.container { position: relative; left: 100px; top: 300px; overflow: hidden; } .bor { margin: -1px; width: 200px; height: 200px; transform: rotate(45deg); -webkit-transform: rotate(45deg); border: 25px solid white; background-color: black; }
在本例中并未作用。
这方案手机上可以,在电脑上会出问题。3.元素border属性颜色设置成 transparent 或者和背景色相同
修改代码,尝试了一下:
与本例中的border要求冲突。
若不需要border可以解决。 -
解决margin塌陷的问题_使用CSS3 transform rotate 出现锯齿效果的解决办法
2020-12-28 20:23:09今天,有朋友在学习CSS3的时候碰到了点问题,transform rotate之后出现了一个和背景颜色同色的 “边框” 。 刚看到的时候,也是很好奇,我还没他学的这么仔细,都没遇到过这个问题。 参考:CSS3 transform rotate...今天,有朋友在学习CSS3的时候碰到了点问题,transform rotate之后出现了一个和背景颜色同色的 “边框” 。 刚看到的时候,也是很好奇,我还没他学的这么仔细,都没遇到过这个问题。 参考:CSS3 transform rotate(旋转)锯齿的解决办法 transform:rotate在手机上显示有锯齿的解决方案大全
这篇文章仅讨论锯齿问题。
解决:
1. 在CSS3 transform属性后加入translateZ(0)
2. 手机上,利用元素外层容器的overflow:hidden; 加上元素margin:-1px;
3. 无需border时,元素border属性颜色设置成 transparent 或者和背景色相同
详细:
代码如下:
<!DOCTYPE html> <html> <head> <title>分享图标</title> <style> * { margin: 0; padding: 0; } .container { position: relative; margin: 5% auto; border: 1px solid #cccccc; width: 300px; height: 300px; } .bor { position: relative; top: 2%; left: 40%; width: 40%; height: 40%; border: 25px solid white; transform: rotate(45deg); -webkit-transform: rotate(45deg); background-color: black; } </style> </head> <body> <div class="container"> <div class="bor"> </div> </div> </body> </html>
发现 “边框” 的颜色和背景色相同,元素各值正常如下,并且元素本身已经border,便觉得可能是本身渲染的问题。
经查阅资料,有以下三个方法:
1. 在CSS3 transform属性后加入translateZ(0)
这是在本例中,最方便的解决办法。
使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果。 GPU加速是在IE9时才加入的,所以兼容性上有点问题。
2. 利用元素外层容器的overflow:hidden; 加上元素margin:-1px;
修改代码,尝试了一下:
.container { position: relative; left: 100px; top: 300px; overflow: hidden; } .bor { margin: -1px; width: 200px; height: 200px; transform: rotate(45deg); -webkit-transform: rotate(45deg); border: 25px solid white; background-color: black; }
在本例中并未作用。
这方案手机上可以,在电脑上会出问题。
3.元素border属性颜色设置成 transparent 或者和背景色相同
修改代码,尝试了一下:
与本例中的border要求冲突。
若不需要border可以解决。
-
css3 transform rotate 在ie7,ie8里兼容
2016-03-21 09:13:27怎么能让css3 transform rotate 在ie7,ie8里兼容? 网上说的ie_css3.htc 不是特别懂她的使用方法呢? -
Ability to transform rotate any feature
2020-12-25 18:18:58<div><p>Select transform ...<p><img alt="transform-rotate" src="https://img-blog.csdnimg.cn/img_convert/7e8e8b1a4214c0fbae9d32ed365b3e08.gif" /></p><p>该提问来源于开源项目:uber/nebula.gl</p></div> -
transform rotate获取方法
2016-12-20 23:50:56如果你曾想通过下面这条语获取...matrix(a,b,c,d,e,f) 看到这个矩阵,很多人都懵了,但是真想获取rotate的角度怎么办,以下几种方法 1、js的Math方法 /* * 解析matrix矩阵,0°-360°,返回旋转角度 * 当a=b||-a如果你曾想通过下面这条语获取transform的值
很遗憾,获取到的是如下一个矩阵$(objName).css('transform');
看到这个矩阵,很多人都懵了,但是真想获取rotate的角度怎么办,以下几种方法matrix(a,b,c,d,e,f)
1、js的Math方法
/* * 解析matrix矩阵,0°-360°,返回旋转角度 * 当a=b||-a=b,0<=deg<=180 * 当-a+b=180,180<=deg<=270 * 当a+b=180,270<=deg<=360 * * 当0<=deg<=180,deg=d; * 当180<deg<=270,deg=180+c; * 当270<deg<=360,deg=360-(c||d); * */ function getmatrix(a,b,c,d,e,f){ var aa=Math.round(180*Math.asin(a)/ Math.PI); var bb=Math.round(180*Math.acos(b)/ Math.PI); var cc=Math.round(180*Math.asin(c)/ Math.PI); var dd=Math.round(180*Math.acos(d)/ Math.PI); var deg=0; if(aa==bb||-aa==bb){ deg=dd; }else if(-aa+bb==180){ deg=180+cc; }else if(aa+bb==180){ deg=360-cc||360-dd; } return deg>=360?0:deg; //return (aa+','+bb+','+cc+','+dd); }
完成!var obj=$('#id'); obj.click(function(){ var deg=eval('get'+obj.css('transform'));//构造getmatrix函数,返回上次旋转度数 var step=45;//每次旋转多少度 obj.css({'transform':'rotate('+(deg+step)%360+'deg)'}); });
可以加上缓动效果
function setDegree($obj, deg) { $obj.css({ "transform": "rotate("+deg+"deg)", "-moz-transform": "rotate("+deg+"deg)", "-o-transform": "rotate("+deg+"deg)" }); } var obj=$('div'); obj.click(function(){ var deg=eval('get'+obj.css('transform'));//构造getmatrix函数,返回上次旋转度数 $(this).text("之前的旋转角度:"+deg); var step=90;//需要旋转多少度 var cnt = 50; // 分50次做缓慢动画 var i=0; var timer = setInterval(function(){ i++; if(i>=cnt) { clearInterval(timer); } setDegree(obj, deg+step*i/cnt); }, 10); });
另外一种方法:就是正则表达式,以后补充还有就是 rotate 插件了
-
JS利用CSS3 transform rotate 实现旋转转盘或背景(大转盘抽奖) 阿星小栈
2018-02-08 10:15:00最近需要做一个旋转转盘抽奖的小组件,初步考虑之后决定用操作背景元素CSS 中的transform rotate 来做。即控制transform属性不断增加转盘的偏转角度值,来达到转动效果。 使元素围绕中心根据角度偏转,在元素的... -
JS利用CSS3 transform rotate 实现旋转转盘或背景(大转盘抽奖)
2013-11-04 18:03:16最近需要做一个旋转转盘抽奖的小组件,初步考虑之后决定用操作背景元素CSS 中的transform rotate 来做。即控制transform属性不断增加转盘的偏转角度值,来达到转动效果。 使元素围绕中心根据角度偏转,在元素的... -
css transform rotate 不影响子元素
2019-12-12 01:15:16直接获取不到rotate角度 console.log($("#mapid" + element).parent("div").css("transform")); 输出为 解决方法: var nowDeg=0; if($("#mapid" + element).parent("div").css("transform")!='none'){ var ... -
拒绝IE8-,CSS3 transform rotate旋转动画效果(支持IE9+/chrome/firefox)
2019-10-07 23:40:49<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" />...拒绝IE8-,CSS3 transform rotate旋转动画效果(支持... -
transform rotate()在ios上不生效
2020-07-30 09:57:311.transform 兼容写法 -ms-transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); -o-transform:rotateY(180deg); /* Opera */ ... -
rust旋转摆放_拒绝IE8-,CSS3 transform rotate旋转动画效果(支持IE9+/chrome/firefox)
2021-02-04 19:50:16拒绝IE8-,CSS3 transform rotate旋转动画效果(支持IE9+/chrome/firefox).feature-box-p_w_picpath {margin: 0 auto 1em auto;width: 120px;height: 107px;overflow: hidden;}.cross-browser .feature-box-p_w_... -
ie7,ie8支持 transform rotate
2016-03-22 02:28:05**怎么才能让ie7,ie8 支持css3的rotate旋转样式呢?** -
transform rotatex、y、z的深刻理解
2018-11-13 15:03:001、先上图 2、以x轴为例,y、z轴一样的道理,学习时关注三句话即可豁然开朗。。。 【 ... 第一、x、y轴分别为标签中心线,z轴垂直标签中心点 ... 第二、围绕x轴旋转时,... 例1 : { transform: rotateX(90deg) tr... -
解决transformrotate()在ios上不生效的坑
2019-08-23 09:42:22问题:今天使用css3的rotate做旋转动画,在...测试:查了一下资料,给@keyframes和transform增加上-webkit-前缀来做兼容 结果:ios手机还是毫无效果。。 继续猜想:查一下资料,猜测是不是视角的问题? 测试:在旋... -
CSS3 transform rotate图片在手机上显示有锯齿的解决办法
2019-11-01 14:26:29transform:rotate 属于简单好用的效果,但在手机上显示时,会有比较明显锯齿。如图: 解决方案也很简单, 利用外层容器的overflow:hidden 加上图片margin:-1px 就可以解决。 原理没去深究,理论上是矢量跟位图的... -
CSS3 transform rotate(旋转)锯齿的解决办法
2015-04-09 18:04:00-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度。本以为轻而易举,可遇到了问题。在Fireofx中显示正常,但在webkit内核下的浏览器中,如Chrome和Safari,图片边缘会有很明显锯齿。... -
通过js获取元素css3的transform rotate旋转角度方法
2019-10-06 13:00:46我们再试用jquery获取样式的时候是通过$('domName').css('transform');的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现... -
通过js获取元素css3的transform rotate旋转角度
2018-04-18 17:55:17我们在试用jquery获取样式的时候是通过$('element').css('transform')的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现的:matrix(a, b, c, d, e, f);这样的返回值并不是我们想... -
使用input range滑块,控制元素transform rotate旋转样式
2019-09-20 18:01:18obj1.style.transform = "rotate(" + value + "deg)"; obj1.style.webkitTransform = "rotate(" + value + "deg)"; obj1.style.msTransform = "rotate(" + value + "deg)"; obj1.style.MozTransform = "rotate(... -
CSS3 transform rotate(旋转)锯齿/元素抖动模糊的解决办法
2017-06-14 10:28:00使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果。只要在CSS3 transform属性...例:-webkit-transform: rotate(5deg) translateZ(0); 转载于:https://www.cnblogs.com/chenzeyongjsj/p/7007524.html... -
css3 transform rotate-2D旋转
2014-09-04 14:55:00-webkit-transform: rotate(180deg);/* Safari 和 Chrome */ } /*icon图标型*/ .box2 { width:32px; height:32px; -webkit-transition: -webkit-transform 0.5s; /* Safari and Chrome */ } .box2:...