为变换创建一个跨浏览器的混合：rotate

我想为sass创建一个混合，它会将旋转应用于指定的元素。 mixin应该采用一个参数，适用于旋转角度的数量。为变换创建一个跨浏览器的混合：rotate

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

这是非常容易做出一个mixin，除了讨厌的IE矩阵符号。有没有人有任何建议的方式转换成使用sass，javascript或两者的组合的IE矩阵转换的程度？

来源

2011-04-14 Adam

如果有人有兴趣，我写了mixin，它的托管在这里：https：// github。com/adambom/CSS3-Please-for-SASS – Adam 2011-04-14 22:27:42

我知道使用IE的过滤器/矩阵变换最大的问题是，当一个盒子旋转时，它不会围绕盒子的中心旋转。想象一下，旋转盒子，绘制一个最小包含旋转盒子的矩形，然后将该盒子放在盒子原来的位置。这产生了一个抵消，这些解决方案都没有（截至2012年10月31日）。如果这种说法没有道理，那么可以这样想：如果您只使用IE中的矩阵将一个方框作为html主体的开始，则旋转的方框将完全可见。在其他浏览器中，它会被裁剪。 – JayC 2012-11-01 04:31:07

该功能允许将度数转换为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。

来源

2011-04-14 21:11:32 Remy

不应鼓励使用隐式全局变量。 – adamse 2011-04-14 21:50:12

ok @adamse我修改了这个 – Remy 2011-04-14 21:55:36

函数中的每个变量定义都会创建一个全局变量。您需要使用'var'来创建局部变量。 – adamse 2011-04-14 21:58:34

rotation matrix的被定义为

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

其中A是角度。 IE矩阵中的M11是第一行的第一个元素; 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]]

来源

2011-04-14 21:33:26 adamse

很好，谢谢，但@lbdremy是第一个。 – Adam 2011-04-14 21:40:59

通常您会将您的问题的最佳答案标记为您接受的答案。不是第一个，但是如果你认为@ lbdremy的答案是最好的！ – adamse 2011-04-14 21:47:24

我只需要这个算法。无论如何，我最终在sass中写了这个函数。 – Adam 2011-04-15 00:51:09

你去那里：

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

来源

2012-06-18 13:08:21 meo

它的前缀声明应该是rotate（＃{$ degrees} deg）;但感谢IE的声明:) – mlarcher 2012-07-19 16:18:44

@mlarcher我错了 – meo 2012-07-20 09:49:31

另一件需要注意的事情是，指南针的sin和cos函数需要弧度，而不是度数，所以用'$ rad：$ deg * pi（）/ 180;'并且使用'$ rad'作为cos和sin函数适用于我。 – 2014-09-04 12:53:50

要使用mixin，您应该使用

@include rotate(24)

来源

2012-10-31 10:54:08 Hoetmaaiers

RobinH答案是正确的。如果你正在使用指南针（你应该是这样），它就像打字一样简单：。你的盒子{@include rotate（-90deg）;}让指南针完成所有的工作，并保持你的代码清洁=） – C13L0 2014-03-20 01:13:23

这里是适用于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');"; 
}

来源

2012-11-01 02:48:50 s29

为变换创建一个跨浏览器的混合：rotate

回答

相关问题