精华内容
下载资源
问答
  • 1.transform 兼容写法 -ms-transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); -o-transform:rotateY(180deg); /* Opera */ ...

    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);
    展开全文
  • 我们再试用jquery获取样式的时候是通过$('domName').css('transform');的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现...

    我们再试用jquery获取样式的时候是通过$('domName').css('transform');的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现的:matrix(a, b, c, d, e, f);这样的返回值并不是我们想要的结果。

    我们要想获取真正的旋转角度值就需要通过一系列的处理来过去,具体方法是:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>Document</title>
     7 </head>
     8 <style>
     9     #divTransform {
    10         margin: 30px;
    11         width: 200px;
    12         height: 100px;
    13         background-color: yellow;
    14         /* Rotate div */
    15         transform: rotate(9deg);
    16         -ms-transform: rotate(9deg);
    17         /* Internet Explorer */
    18         -moz-transform: rotate(9deg);
    19         /* Firefox */
    20         -webkit-transform: rotate(9deg);
    21         /* Safari 和 Chrome */
    22         -o-transform: rotate(9deg);
    23         /* Opera */
    24     }
    25 </style>
    26 
    27 <body>
    28 <div id="divTransform">
    29 </div>
    30 </body>
    31 <script>
    32     var el = document.getElementById("divTransform");
    33     var st = window.getComputedStyle(el, null);
    34     var tr = st.getPropertyValue("-webkit-transform") ||
    35         st.getPropertyValue("-moz-transform") ||
    36         st.getPropertyValue("-ms-transform") ||
    37         st.getPropertyValue("-o-transform") ||
    38         st.getPropertyValue("transform") ||
    39         "FAIL";
    40     // With rotate(30deg)...
    41     // matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px)
    42     console.log('Matrix: '   tr);
    43     // rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix
    44     var values = tr.split('(')[1].split(')')[0].split(',');
    45     var a = values[0];
    46     var b = values[1];
    47     var c = values[2];
    48     var d = values[3];
    49     var scale = Math.sqrt(a * a   b * b);
    50     console.log('Scale: '   scale);
    51     // arc sin, convert from radians to degrees, round
    52     var sin = b / scale;
    53     // next line works for 30deg but not 130deg (returns 50);
    54     // var angle = Math.round(Math.asin(sin) * (180/Math.PI));
    55     var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
    56     console.log('Rotate: '   angle   'deg');
    57 </script>
    58 
    59 </html>
     

    这个方法是国外的牛人写的,记录下来。

     

    更多专业前端知识,请上 【猿2048】www.mk2048.com
    展开全文
  • 解决transformrotate()在ios上不生效的坑

    千次阅读 2019-08-23 09:42:22
    问题:今天使用css3的rotate做旋转动画,在...测试:查了一下资料,给@keyframes和transform增加上-webkit-前缀来做兼容 结果:ios手机还是毫无效果。。 继续猜想:查一下资料,猜测是不是视角的问题? 测试:在旋...

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

    猜想:rotate存在兼容问题?

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

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

    继续猜想:查一下资料,猜测是不是视角的问题?

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

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

    解决方案:

    父元素:transform: perspective(1000);
    子元素:transform: transform:rotate();
    
    兼容性写法:
    	transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -o-transform: translateX(-50%);
    
    

    参考链接

    展开全文
  • 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
    }
    

    然后。。。你去看看吧。。。反正就是。。。解决了!没毛病!

    展开全文
  • 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
  • 最近需要做一个旋转转盘抽奖的小组件,初步考虑之后决定用操作背景元素CSS 中的transform rotate 来做。即控制transform属性不断增加转盘的偏转角度值,来达到转动效果。 使元素围绕中心根据角度偏转,在元素的...
  • 使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果。只要在CSS3 transform属性...例:-webkit-transform: rotate(5deg) translateZ(0); 转载于:https://www.cnblogs.com/chenzeyongjsj/p/7007524.html...
  • 我们在试用jquery获取样式的时候是通过$('element').css('transform')的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现的:matrix(a, b, c, d, e, f);这样的返回值并不是我们想...
  • transform:rotate失效

    千次阅读 2019-12-31 15:37:41
    项目里面经常用到一些icon图标需要旋转角度,这不,有个向下的箭头直接用的大于号转90度就行了,直接... transform:rotateZ(90deg); } </style> 如上代码:rotateZ不管用,这不,我就去MDN找答案去了结果在这...
  • 如果你曾想通过下面这条语获取transform的值 ...哈哈,看到这个矩阵,很多人都懵了,但是真想获取rotate的角度怎么办,以下是我总结的一些函数: /* * 解析matrix矩阵,0°-360°,返回旋转角度 * 当a=b||-a=b,0<=
  • 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 ...
  • 最初的想法是将这两个div绝对定位,重叠在一起,背部的元素初始化transform: rotateY(180deg);然后翻转 这个元素的父元素,但是测试没有用,显示的总是最上面的那个元素。  后来查阅资料,想到了一种实现方式,...
  • CSS的rotate只 对block或 inline-block类型元素有效
  • 1、先上图 2、以x轴为例,y、z轴一样的道理,学习时关注三句话即可豁然开朗。。。 【 ... 第一、x、y轴分别为标签中心线,z轴垂直标签中心点 ... 第二、围绕x轴旋转时,... 例1 : { transform: rotateX(90deg) tr...
  • [Unity]Transform.Rotate详解

    千次阅读 2019-10-04 01:25:24
    Transform.Rotate详解 1.问题引出 2.代码说明 3.原理解释 4.小结 1.问题引出 Transform.Rotate传入了一个欧拉角三元组(或者单独的三个float类型数据),以及一个标识符用于标记旋转的参考系是自身还是全局...
  • transformrotate(90deg)transformrotate(-270deg) 顺时针旋转90° transformrotateX(90deg)沿x轴旋转90度 transform:rotateY(180deg)沿y轴旋转180度 通常为镜面翻转 <template> ...
  • transformrotate3d旋转方向

    千次阅读 2020-06-28 23:29:07
    rotate有四个参数 rotate3d(x,y,z,angle) 前三个分别为是否绕x,y,z旋转,1为是,0为否 rotatex、rotatez的旋转正方向是顺时针,rotatey的旋转正方向是逆时针
  • css3 transformrotate旋转方向

    千次阅读 2018-07-18 16:16:43
    练习做智能社的一个3D图片环效果时,发现怎么鼠标移动方向和图片环的旋转方向不统一,原来是旋转方向一直没弄清楚。 document.onmousedown = function(ev){ var e = ev || window.event;...
  • 今天,有朋友在学习CSS3的时候碰到了点问题,transform rotate之后出现了一个和背景颜色同色的 “边框” 。 刚看到的时候,也是很好奇,我还没他学的这么仔细,都没遇到过这个问题。 参考:CSS3 transform rotate...
  • transform:rotate兼容

    2021-04-16 11:30:57
    transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 / -webkit-transform:rotate(30deg); / Safari and Chrome */
  • **怎么才能让ie7,ie8 支持css3的rotate旋转样式呢?**
  • CSS transform中的rotate设置旋转中心

    千次阅读 2021-04-16 09:59:42
    transform-origin属性 默认情况,变形的原点在元素的中心点,或者是元素X轴和Y轴的50%处。 我们没有使用transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心(变形...
  • transform:rotateX(45deg);沿着x轴正方向旋转45度; transform:rotateY(45deg);沿着y轴正方向旋转45度; transform:rotateZ(45deg);沿着z轴正方向旋转45度; body { /*想看到3D透视效果需要给被观察元素的父元素添加...
  • 怎么能让css3 transform rotate 在ie7,ie8里兼容? 网上说的ie_css3.htc 不是特别懂她的使用方法呢?
  • -moz-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); 2、grad 梯度(Gradians)。一个圆共400梯度 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad -moz-trans
  • 想让箭头旋转向上 问题:直接引用transform: rotate(270deg);不起效 解决:加入display: inline-...产生原因:内联元素使用transformrotate属性不起作用,这时可以将元素设置为inline-block或者block ...
  • 获取css的transformrotate的值

    千次阅读 2019-04-25 12:12:02
    1.如果是直接写在css中的transfrom transform:rotate(120deg) 利用jquery获取 $('#aa').css('transform') ,返回的值为 matrix(a,b,c,d,e,f) 为一个矩阵函数,需要利用方法进行获取确切的值...
  • 比如this.style.backgroundColor = "red"; 那我想选中transform:rotate怎么写?试了好多种组合都不行 查了好像是this.style.transform = 'rotate("20deg")';可是没有作用? 求大佬指点!!!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 76,233
精华内容 30,493
关键字:

transformrotate