web-dev-qa-db-fra.com

Un moyen multi-navigateur pour retourner HTML / image via Javascript / CSS?

Existe-t-il une bibliothèque/un moyen simple de retourner une image?

Retournez l'image comme ceci:

AABBCC      CCBBAA
AABBCC  ->  CCBBAA

Je ne recherche pas d'animations , il suffit de retourner l'image.

J'ai googlé sur aucun avial et n'ai trouvé une version complexe utilisant SVG que sur MozillaZine dont je ne suis pas sûr que cela fonctionnera sur plusieurs navigateurs.

javascriptcssimage-manipulation
72
chakrit

Le CSS suivant fonctionnera dans IE et les navigateurs modernes qui prennent en charge les transformations CSS. J'ai inclus une classe de retournement vertical au cas où vous voudriez aussi l'utiliser.

.flip-horizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph;
}
.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv; /*IE*/
    filter: flipv;
}
192
Eli Grey

Jetez un oeil à l'une des nombreuses bibliothèques de type réflexion.js , elles sont assez simples. Dans IE ils prendront et utiliseront le filtre 'flipv', il y a aussi un filtre 'fliph'. À l'intérieur des autres navigateurs, il créera une balise canvas et utilisera le drawImage. Bien que la réponse d'Elie soit prend probablement en charge les mêmes navigateurs.

3
gnarf

Je viens de déterrer cette réponse tout en essayant de corriger un bogue, alors que la réponse suggérée est correcte, j'ai trouvé qu'elle enfreint la plupart des règles CSS Linting modernes concernant l'inclusion de toutes les règles du fournisseur pour la transformation. Cependant, l'inclusion de la règle -ms-tranform provoque un bogue étrange dans IE9 où elle applique les règles de filtrage et -ms-transform provoquant le retournement et le retour d'une image.

Voici mon amélioration suggérée qui prend également en charge les règles CSS Lint:

.flip-horizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -ms-transform: scaleX(1); /* linting rule fix + IE9 fix */
    transform: scaleX(-1);
    -ms-filter: fliph;
    filter: fliph;
}
.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(1);  /* linting rule fix + IE9 fix */
    transform: scaleY(-1);
    -ms-filter: flipv;
    filter: flipv;
}
2
Dave Storey