创建跨浏览器混合进行转换：旋转

JavaScript CSS

凯西里

2020-03-24

我想为sass创建一个mixin，它将对指定的元素应用旋转。对于要应用的旋转度数，mixin应该采用一个参数。

在css3please.com中，我找到了一种跨浏览器的方式来使用CSS来实现此目的：

.box_rotate {
     -moz-transform: rotate(7.5deg);  /* FF3.5+ */
       -o-transform: rotate(7.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(7.5deg);  /* IE9 */
          transform: rotate(7.5deg);  
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9  */
                     M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
               zoom: 1;
}

除了讨厌的IE矩阵符号外，这一切都很容易实现。有没有人对使用sass，javascript或两者的组合将度数转换为IE矩阵转换的方法有任何建议？

第3191篇《创建跨浏览器混合进行转换：旋转》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
达蒙小小 2020.03.24

的旋转矩阵被定义为

[[cos(A), -sin(A)],
 [sin(A),  cos(A)]]

A角度在哪里。M11在IE矩阵中是第一行的第一元素；M12：第一行的第二个元素，依此类推。

JavaScript Math.sin并Math.cos以弧度运算，因此您必须将度数转换为弧度

radians = degrees * Math.PI / 180

放在一起，我们得到以下功能：

function rotationMatrix(degrees) {
  var A = degrees * Math.PI / 180;
  return [[Math.cos(A), -Math.sin(A)], [Math.sin(A),  Math.cos(A)]]
}

例：

rotationMatrix(10) 
// => [[0.984807753012208, -0.17364817766693033], 
//     [0.17364817766693033, 0.984807753012208]]
猴子泡芙 2020.03.24

要使用mixin，您应该使用 

@include rotate(24)
小胖Gil 2020.03.24

此功能允许将度数转换为IE矩阵转换。

//deg input defines the requested angle of rotation.
function degreeToIEMatrix(deg){   
    var deg2radians = Math.PI * 2 / 360;
    var rad = deg * deg2radians ;
    var costheta = Math.cos(rad);
    var sintheta = Math.sin(rad);

    var M11 = costheta;
    var M12 = -sintheta;
    var M21 = sintheta;
    var M22 = costheta;
}

您可以在这里找到更多信息。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android