创建一个跨浏览器的mixin进行转换:旋转

时间:2011-04-14 20:49:43

标签: javascript css css3 sass

我想为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矩阵转换的方法有任何建议?

5 个答案:

答案 0 :(得分:21)

你去了:

SASS:

@mixin rotate( $degrees )
  -webkit-transform: rotate(#{$degrees}deg)
  -moz-transform: rotate(#{$degrees}deg)
  -ms-transform: rotate(#{$degrees}deg)
  -o-transform: rotate(#{$degrees}deg)
  transform: rotate(#{$degrees}deg)

  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})"
  zoom: 1

SCSS:

@mixin rotate( $degrees ) {
  -webkit-transform: rotate(#{$degrees}deg);
  -moz-transform: rotate(#{$degrees}deg);
  -ms-transform: rotate(#{$degrees}deg);
  -o-transform: rotate(#{$degrees}deg);
  transform: rotate(#{$degrees}deg);

  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)});
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";
  zoom: 1;
 }

用法:

@include rotate( 24 )

或者你可以简单地使用罗盘,让你的生活更轻松:P

答案 1 :(得分:10)

rotation matrix定义为

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

其中A是角度。 IE矩阵中的M11是第一行的第一个元素; M12:第一行的第二个元素等。

JavaScripts Math.sinMath.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]]

答案 2 :(得分:6)

此函数允许将度数转换为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;
}

您会找到更多信息here

答案 3 :(得分:1)

以下是适用于javascript控制台的@ Remy代码版本。只需将其粘贴到您的控制台,然后尝试makeIErotate(270),它就会吐出跨浏览器样式,准备粘贴到您的CSS文件中。

当心:除非你有坚实的背景颜色,否则IE中的抗锯齿很难看 - 即使这样它也会非常模糊。更多here

function makeIErotate(deg) {    
    var deg2radians = Math.PI * 2 / 360;
    var rad = deg * deg2radians ;
    var costheta = Math.cos(rad);
    var sintheta = Math.sin(rad);
    return "-moz-transform: rotate(" + deg + "deg);\n\
            -o-transform: rotate(" + deg + "deg);\n\
            -webkit-transform: rotate(" + deg + "deg);\n\
            -ms-transform: rotate(" + deg + "deg);\n\
            transform: rotate(" + deg + "deg);\n\
            filter: progid:DXImageTransform.Microsoft.Matrix(\n\
                    M11=" + costheta + ",\n\
                    M12=" + -sintheta + ",\n\
                    M21=" + sintheta + ",\n\
                    M22=" + costheta + ", sizingMethod='auto expand');";
}

答案 4 :(得分:0)

要使用mixin,您应该使用

@include rotate(24)