Multi-navigateurs façon renverser l’image/html via Javascript/CSS ?

Question

Y a-t-il une manière de bibliothèque/simple faire pivoter une image ?

Retourner l’image comme ceci :

je ne cherche pas des animations, flip juste l’image.

J’ai googlé à aucun avial et seulement trouvé une version complexe qui utilisé SVG sur MozillaZine qui je ne suis pas persuadé que ça va marcher entre les navigateurs.

Answer 1

Le CSS suivant fonctionnera dans IE et les navigateurs modernes qui prennent en charge les transformations CSS. J’ai inclus une classe flip verticale, juste au cas où vous pourriez vouloir utiliser aussi.

Answer 2

Jetez un oeil à une des bibliothèques de type reflection.js beaucoup, ils sont assez simples. Dans IE ils jetteront et utiliser le filtre « flipv », il y a aussi un filtre « fliph ». À l’intérieur d’autres navigateurs, il créera une balise canvas et utiliser le drawImage. Bien que la réponse d’Élie prend probablement en charge les navigateurs mêmes.

Answer 3

Juste déterré cette réponse tout en essayant de corriger un bug, alors que la réponse proposée est correcte, j’ai trouvé que ça casse les règles CSS peluchage plus modernes concernant l’inclusion de toutes les règles du vendeur pour la transformation. Cependant, y compris la règle -ms-transformer provoque un bug bizarre dans IE9 où il applique les règles de filtre et ms-transform provoquant une image flip et rabattables à nouveau.

Voici ma suggestion d’amélioration qui prend également en charge les règles CSS peluches :

Answer 4

Si vous souhaitez uniquement retourner une image d’arrière-plan, vous pouvez utiliser la classe sur les éléments internes à l’intérieur d’un div. flipped fondamentalement vous êtes renversant les éléments internes avec la div principale, mais retournement de chacun d’eux en arrière. Fonctionne dans Firefox en tout cas.

Comme ça :