javascript - objetos - Crea una mezcla de navegador cruzado para transformar: rotar

recorrer array de objetos javascript

Question

Quiero crear una mezcla para sass que aplique una rotación al elemento especificado. La mezcla debe tomar un parámetro, para el número de grados de rotación a aplicar.

Desde css3please.com, encontré una forma de navegador cruzado para implementar esto con 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;
}

Todo esto es muy fácil para hacer una mezcla, excepto por la molesta notación de IE. ¿Alguien tiene alguna sugerencia para una forma de transformar los grados en la transformación de matriz de IE usando sass, javascript o una combinación de ambos?

Answer 1

Aquí hay una versión del código de @Remy adecuada para usar en la consola de javascript. Solo péguelo en su consola, luego intente makeIErotate (270), y escupirá estilos de navegador cruzados listos para pegar en su archivo CSS.

CUIDADO: el anti-aliasing en IE es feo a menos que tenga un color de fondo sólido, incluso entonces puede ser bastante borroso. Más here .

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'');";
}

Answer 2

Esta función permite transformar los grados en transformación de matriz 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;
}

Encontrará más información here .

Answer 3

Hay que ir

HABLAR CON DESCARO A:

@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;
}

uso:

@include rotate( 24 )

o simplemente puedes usar la brújula y hacer tu vida mucho más fácil: P

Answer 4

La matriz de rotación se define como

[[cos(A), -sin(A)],
[sin(A), cos(A)]]

donde A es el ángulo. M11 en la matriz de IE es el primer elemento de la primera fila; M12 : el segundo elemento de la primera fila, etc.

JavaScripts Math.sin y Math.cos operan con radianes, por lo que tendrás que convertir tus títulos en radianes

radians = degrees * Math.PI / 180

Poniendo esto juntos obtenemos esta función:

function rotationMatrix(degrees) {
var A = degrees * Math.PI / 180;
return [[Math.cos(A), -Math.sin(A)], [Math.sin(A), Math.cos(A)]]
}

Ejemplo:

rotationMatrix(10)
// => [[0.984807753012208, -0.17364817766693033],
// [0.17364817766693033, 0.984807753012208]]

Answer 5

Para usar el mixin, debes usar

@include rotate(24)