Cross-browser per capovolgere html/immagine tramite Javascript/CSS?

Question

C'è una libreria/modo semplice per capovolgere un'immagine?

immagine flip in questo modo:

AABBCC  CCBBAA 
AABBCC -> CCBBAA 

Io non sto cercando per le animazioni, basta capovolgere l'immagine.

Non ho cercato su Google e ho trovato solo una versione complessa che utilizza SVG su MozillaZine che non sono sicuro che funzionerà su browser.

Answer 1

Il seguente CSS funzionerà in IE e nei browser moderni che supportano le trasformazioni CSS. Ho incluso una classe flip verticale solo nel caso in cui tu volessi usarla anche tu.

.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

Date un'occhiata a una delle tante librerie dei tipi reflection.js, sono abbastanza semplici. In IE prenderanno e useranno il filtro 'flipv', c'è anche un filtro 'fliph'. All'interno di altri browser, creerà un tag canvas e utilizzerà drawImage. Anche se la risposta di Elijah probabilmente supporta gli stessi browser.

Answer 3

Se si desidera capovolgere un'immagine di sfondo, è possibile utilizzare la classe sugli elementi interni all'interno di un div flip. Fondamentalmente stai capovolgendo gli elementi interni con il div principale, ma ribaltandoli indietro. Funziona comunque con Firefox.

Ti piace questa:

<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

appena scavato questa risposta durante il tentativo di correggere un bug, mentre la risposta suggerita è corretta ho scoperto che si rompe più moderne regole CSS linting quanto riguarda l'inclusione di tutte le regole vendor per la trasformazione. Tuttavia, inclusa la regola -ms-tranform causa un bug strano in IE9 in cui applica il filtro e le regole di trasformazione -ms che causano il ribaltamento e il ribaltamento dell'immagine.

Ecco il mio miglioramento suggerito che supporta anche le regole 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; 
}