Créer un mixin cross-browser pour transform : rotate

Question

Je souhaite créer un mixin pour sass qui appliquera une rotation à l'élément spécifié. Le mixin doit prendre un paramètre, pour le nombre de degrés de rotation à appliquer.

Sur le site css3please.com, j'ai trouvé une méthode multi-navigateurs pour mettre cela en œuvre avec 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;
}

Il est très facile de créer un mixin pour tout cela, à l'exception de la notation matricielle de l'IE. Quelqu'un a-t-il des suggestions pour transformer les degrés dans la transformation matricielle IE en utilisant sass, javascript, ou une combinaison des deux ?

Answer 1

Voilà :

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

l'utilisation :

@include rotate( 24 )

ou vous pouvez simplement utiliser une boussole et vous faciliter la vie :P

Answer 2

En matrice de rotation est défini comme suit

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

donde A est l'angle. M11 dans la matrice IE est le premier élément de la première ligne ; M12 : le deuxième élément de la première ligne, etc.

JavaScripts Math.sin y Math.cos fonctionnent en radians, vous devrez donc convertir vos degrés en radians.

radians = degrees * Math.PI / 180

En combinant ces éléments, nous obtenons la fonction suivante :

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

Exemple :

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

Answer 3

Cette fonction permet de transformer les degrés en transformation matricielle 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;
}

Vous trouverez plus d'informations aquí .

Answer 4

Voici une version du code de @Remy adaptée à une utilisation dans la console javascript. Il suffit de le coller dans votre console, puis d'essayer makeIErotate(270), et il recrachera des styles cross-browser prêts à être collés dans votre fichier CSS.

ATTENTION : l'anticrénelage dans IE est laid à moins que vous n'ayez une couleur d'arrière-plan solide - même dans ce cas, il peut être assez flou. Plus d'informations aquí .

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 5

Pour utiliser le mixin, vous devez utiliser

@include rotate(24)