[英]Create a cross-browser mixin for transform: rotate
I want to create a mixin for sass that will apply a rotation to the specified element. 我想为sass创建一个mixin,它将旋转应用于指定的元素。 The mixin should take one parameter, for the number of degrees of rotation to apply.
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. 除了讨厌的IE矩阵表示法之外,这对于混音来说都非常容易。 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?
有没有人对使用sass,javascript或两者的组合将度数转换为IE矩阵转换的方法有任何建议?
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
The rotation matrix is defined as 旋转矩阵定义为
[[cos(A), -sin(A)],
[sin(A), cos(A)]]
where A
is the angle. 其中
A
是角度。 M11
in the IE matrix is the first element of the first row; IE矩阵中的
M11
是第一行的第一个元素; M12
: the second element of the first row etc. M12
:第一行的第二个元素等
JavaScripts Math.sin
and Math.cos
operate on radians so you will have to turn your degrees into radians JavaScripts
Math.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]]
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;
}
Here is a version of @Remy's code suitable for use in the javascript console. 这是适用于javascript控制台的@ Remy代码版本。 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.
只需将其粘贴到您的控制台,然后尝试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. 请注意:IE中的抗锯齿很难看,除非你有一个坚实的背景颜色 - 即使这样它也会非常模糊。 More 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');";
}
要使用mixin,你应该使用
@include rotate(24)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.