创建用于转换的跨浏览器混合：旋转
|
我想为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;
}
没有找到相关结果
已邀请:
5 个回复
程琶
//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; }弓萍功
@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@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; }或者您可以简单地使用指南针，使您的生活更轻松：P提孺局缎
是角度。 IE矩阵中的“ 7”是第一行的第一元素；：第一行的第二个元素，以此类推。 JavaScript和以弧度运行，因此您必须将度数转换为弧度放在一起，我们得到以下功能：function rotationMatrix(degrees) { var A = degrees * Math.PI / 180; return [[Math.cos(A), -Math.sin(A)], [Math.sin(A), Math.cos(A)]] }冕偷淮款
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\');\"; }恋裂