Wieloprzesyłowy sposób na zamianę html/image za pomocą Javascript/CSS?

Question

Czy istnieje biblioteka/prosty sposób odwrócenia obrazu?

Przerzucanie obrazu tak:

AABBCC  CCBBAA 
AABBCC -> CCBBAA 

Nie szukam dla animacji, po prostu odwrócić obraz.

Nie zgłosiłem się na żadną licencję i znalazłem jedynie wersję złożoną, która wykorzystywała SVG pod numerem MozillaZine, której nie mam pewności, że będzie działać w różnych przeglądarkach.

Answer 1

Następujące pliki CSS będą działały w IE i nowoczesnych przeglądarkach obsługujących transformacje CSS. Zawarłem klasę klapki pionowej na wypadek, gdybyś chciał jej użyć.

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

Answer 2

Spójrz na jednym z wielu reflection.js bibliotek typów, są całkiem proste. W IE wezmą i użyją filtru "flipv", jest też filtr "fliph". Wewnątrz innych przeglądarek utworzy tag canvas i użyje drawImage. Chociaż odpowiedź Eliasza prawdopodobnie obsługuje te same przeglądarki.

Answer 3

Jeśli chcesz tylko odwrócić obraz tła, możesz użyć klasy na wewnętrznych elementach wewnątrz odwróconego div. Zasadniczo przerzucasz elementy wewnętrzne głównym div, ale odwracasz je z powrotem. Mimo to działa w Firefoksie.

Jak to:

<div id="container" class="flip-horizontal"> <!-- container would have your background image --> 
<h3 class="flip-horizontal">Hello There!</h3> 
<p class="flip-horizontal">Here is some text</p> 
</div> 

Answer 4

Wystarczy wykopał tę odpowiedź, starając się naprawić błąd, a sugerowana odpowiedź jest poprawna I odkryli, że łamie ona najbardziej nowoczesnych reguł CSS strzępienie dotyczące włączenia wszystkich reguł dostawcy dla transformacji. Jednak włączenie reguły -ms-transform powoduje dziwny błąd w IE9, w którym stosuje reguły filtru i -ms-transform, powodując odwrócenie obrazu i powrót do poprzedniej wersji.

Oto moja sugerowana poprawa który obsługuje również reguły 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; 
}