transform rotate()在ios上不生效

2020-07-30 09:57:31

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);

收起

展开全文

css ios

通过js获取元素css3的transform rotate旋转角度方法

2019-10-06 13:00:46

我们再试用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

收起

展开全文

javascript

解决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%);

参考链接

收起

展开全文

ios transform css3