问题描述
|
我想为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矩阵转换的方法有任何建议?
解决方法
此功能允许将度数转换为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;
}
您将在此处找到更多信息。
,你去了:
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\',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\',M22=#{cos($degrees)});
-ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\',M22=#{cos($degrees)})\";
zoom: 1;
}
用法:
@include rotate( 24 )
或者您可以简单地使用指南针,使您的生活更轻松:P
,旋转矩阵定义为
[[cos(A),-sin(A)],[sin(A),cos(A)]]
A
是角度。 IE矩阵中的“ 7”是第一行的第一元素; M12
:第一行的第二个元素,以此类推。
JavaScriptMath.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]]
,这是适用于javascript控制台的@Remy \代码版本。只需将其粘贴到控制台中,然后尝试makeIErotate(270),它就会吐出跨浏览器样式,准备粘贴到CSS文件中。
注意:除非您具有纯色背景色,否则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\');\";
}
,要使用mixin,您应该使用
@include rotate(24)