为transform：rotate创建一个跨浏览器的mixin [英] Create a cross-browser mixin for transform: rotate

问题描述

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

I want to create a mixin for sass that will apply a rotation to the specified element. The mixin should take one parameter, for the number of degrees of rotation to apply.

从css3please.com，我发现了一个跨浏览器的方法来实现CSS：

From css3please.com, I found a cross-browser way to implement this with 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;
}

这是很容易做一个混合，除了pesky IE矩阵符号。有没有人有任何建议，使用sass，javascript或两者的组合将度数转换为IE矩阵转换？

This is all very easy to make a mixin for, except for the pesky IE matrix notation. Does anyone have any suggestions for a way to transform the degrees into the IE matrix transformation using sass, javascript, or a combo of both?

推荐答案

此函数允许将度数转换为IE矩阵变换。

This function allows to transform the degrees into IE matrix transformation.

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

您将找到更多信息此处。

这篇关于为transform：rotate创建一个跨浏览器的mixin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！