javascript 为transform创建跨浏览器mixin：rotate
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5669489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a cross-browser mixin for transform: rotate
提问by Adam
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.
我想为 sass 创建一个 mixin，它将旋转应用到指定的元素。mixin 应该采用一个参数，用于应用旋转的度数。
From css3please.com, I found a cross-browser way to implement this with CSS:
从 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;
}
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 矩阵表示法之外，这一切都非常容易混合。有没有人对使用 sass、javascript 或两者的组合将度数转换为 IE 矩阵转换的方法有任何建议？
采纳答案by Remy
This function allows to transform the degrees into IE matrix transformation.
此函数允许将度数转换为 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;
}
You will find more informations here.
您将在此处找到更多信息。
回答by meo
There you go:
你去吧：
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:
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;
}
usage:
用法：
@include rotate( 24 )
or you could simply use compass and make your life a lot easier :P
或者你可以简单地使用指南针，让你的生活更轻松：P
回答by adamse
The rotation matrixis defined as
的旋转矩阵被定义为
[[cos(A), -sin(A)],
[sin(A), cos(A)]]
where Ais the angle. M11in the IE matrix is the first element of the first row; M12: the second element of the first row etc.
A角度在哪里。M11在IE矩阵中是第一行的第一个元素；M12: 第一行的第二个元素等。
JavaScripts Math.sinand Math.cosoperate on radians so you will have to turn your degrees into radians
JavaScriptsMath.sin并Math.cos在弧度上进行运算，因此您必须将度数转换为弧度
radians = degrees * Math.PI / 180
Putting this together we get this function:
把这些放在一起，我们得到了这个函数：
function rotationMatrix(degrees) {
var A = degrees * Math.PI / 180;
return [[Math.cos(A), -Math.sin(A)], [Math.sin(A), Math.cos(A)]]
}
Example:
例子：
rotationMatrix(10)
// => [[0.984807753012208, -0.17364817766693033],
// [0.17364817766693033, 0.984807753012208]]
回答by s29
Here is a version of @Remy's code suitable for use in the javascript console. Just paste it into your console, then try makeIErotate(270), and it'll spit out cross-browser styles ready to paste into your CSS file.
这是适合在 javascript 控制台中使用的@Remy 代码版本。只需将其粘贴到您的控制台中，然后尝试 makeIErotate(270)，它就会吐出准备粘贴到您的 CSS 文件中的跨浏览器样式。
BEWARE: the anti-aliasing in IE is ugly unless you have a solid background colour- even then it can be pretty blurry. More here.
当心：IE 中的抗锯齿很难看，除非你有纯色背景——即使这样它也可能非常模糊。更多在这里。
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');";
}
回答by Hoetmaaiers
To use the mixin, you should use
要使用 mixin，你应该使用
@include rotate(24)
