[英]Create a cross-browser mixin for transform: rotate
我想為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矩陣轉換的方法有任何建議?
你去:
上海社會科學院:
@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
旋轉矩陣定義為
[[cos(A), -sin(A)],
[sin(A), cos(A)]]
其中A
是角度。 IE矩陣中的M11
是第一行的第一個元素; M12
:第一行的第二個元素等
JavaScripts 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]]
此函數允許將度數轉換為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;
}
你會在這里找到更多的信息。
這是適用於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)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.