精华内容
下载资源
问答
  • Safari 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之后出现了一个和背景颜色同色的 “边框” 。 刚看到的时候,也是很好奇,我还没他学的这么仔细,都没遇到过这个问题。 参考: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)

    在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;
    }
    

    div.bor
    div.container
    在本例中并未作用。
    这方案手机上可以,在电脑上会出问题。

    3.元素border属性颜色设置成 transparent 或者和背景色相同

    修改代码,尝试了一下:
    transparent
    与本例中的border要求冲突。
    若不需要border可以解决。

    展开全文
  • 今天,有朋友在学习CSS3的时候碰到了点问题,transform rotate之后出现了一个和背景颜色同色的 “边框” 。 刚看到的时候,也是很好奇,我还没他学的这么仔细,都没遇到过这个问题。 参考:CSS3 transform rotate...

    f8ea7c0cc348fdba0f05568160f724a7.png

    今天,有朋友在学习CSS3的时候碰到了点问题,transform rotate之后出现了一个和背景颜色同色的 “边框” 。 刚看到的时候,也是很好奇,我还没他学的这么仔细,都没遇到过这个问题。 参考:CSS3 transform rotate(旋转)锯齿的解决办法 transform:rotate在手机上显示有锯齿的解决方案大全

    这篇文章仅讨论锯齿问题。

    解决:

    1. 在CSS3 transform属性后加入translateZ(0)

    2. 手机上,利用元素外层容器的overflow:hidden; 加上元素margin:-1px;

    3. 无需border时,元素border属性颜色设置成 transparent 或者和背景色相同


    详细:

    7acfaf56b364186ad0127f2149183aa2.png

    代码如下:

    <!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,便觉得可能是本身渲染的问题。

    c1f4f9e2910cd27ccfe6fc4d4559c5db.png

    经查阅资料,有以下三个方法:

    1. 在CSS3 transform属性后加入translateZ(0)

    8d75807027c4fda89d2e136b17e9d9e8.png

    这是在本例中,最方便的解决办法。

    使用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;
            }

    c2d0c81ab837b811720df14b0d8858e1.png

    812cd3c40e39f4874c0267a2617ae017.png

    在本例中并未作用。

    这方案手机上可以,在电脑上会出问题。

    3.元素border属性颜色设置成 transparent 或者和背景色相同

    修改代码,尝试了一下:

    429f619a9b1981c48e5d64fae4a0efaf.png

    8bc1ce86e98dc4c07b939fabcf6b6729.png

    与本例中的border要求冲突。

    若不需要border可以解决。

    展开全文
  • 怎么能让css3 transform rotate 在ie7,ie8里兼容? 网上说的ie_css3.htc 不是特别懂她的使用方法呢?
  • <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');  
    很遗憾,获取到的是如下一个矩阵

    matrix(a,b,c,d,e,f)  
    看到这个矩阵,很多人都懵了,但是真想获取rotate的角度怎么办,以下几种方法

    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 插件了



    展开全文
  • 最近需要做一个旋转转盘抽奖的小组件,初步考虑之后决定用操作背景元素CSS 中的transform rotate 来做。即控制transform属性不断增加转盘的偏转角度值,来达到转动效果。 使元素围绕中心根据角度偏转,在元素的...
  • 最近需要做一个旋转转盘抽奖的小组件,初步考虑之后决定用操作背景元素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 ...
  • <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" />...拒绝IE8-,CSS3 transform rotate旋转动画效果(支持...
  • 1.transform 兼容写法 -ms-transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); -o-transform:rotateY(180deg); /* Opera */ ...
  • 拒绝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 支持css3的rotate旋转样式呢?**
  • 1、先上图 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手机还是毫无效果。。 继续猜想:查一下资料,猜测是不是视角的问题? 测试:在旋...
  • transform:rotate 属于简单好用的效果,但在手机上显示时,会有比较明显锯齿。如图: 解决方案也很简单, 利用外层容器的overflow:hidden 加上图片margin:-1px 就可以解决。 原理没去深究,理论上是矢量跟位图的...
  • -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度。本以为轻而易举,可遇到了问题。在Fireofx中显示正常,但在webkit内核下的浏览器中,如Chrome和Safari,图片边缘会有很明显锯齿。...
  • 我们再试用jquery获取样式的时候是通过$('domName').css('transform');的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现...
  • 我们在试用jquery获取样式的时候是通过$('element').css('transform')的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现的:matrix(a, b, c, d, e, f);这样的返回值并不是我们想...
  • obj1.style.transform = "rotate(" + value + "deg)"; obj1.style.webkitTransform = "rotate(" + value + "deg)"; obj1.style.msTransform = "rotate(" + value + "deg)"; obj1.style.MozTransform = "rotate(...
  • 使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果。只要在CSS3 transform属性...例:-webkit-transform: rotate(5deg) translateZ(0); 转载于:https://www.cnblogs.com/chenzeyongjsj/p/7007524.html...
  • -webkit-transformrotate(180deg);/* Safari 和 Chrome */ } /*icon图标型*/ .box2 {  width:32px; height:32px;  -webkit-transition: -webkit-transform 0.5s; /* Safari and Chrome */ } .box2:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,976
精华内容 1,990
关键字:

transformrotate