我想为 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 矩阵转换的方法,有没有人有任何建议?
最佳答案
你去吧:
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:
@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
关于javascript - 为转换 : rotate 创建跨浏览器混合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5669489/