我想为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矩阵转换的方法有任何建议?
的旋转矩阵被定义为
A
角度在哪里。M11
在IE矩阵中是第一行的第一元素;M12
:第一行的第二个元素,依此类推。JavaScript
Math.sin
并Math.cos
以弧度运算,因此您必须将度数转换为弧度放在一起,我们得到以下功能:
例: