Przerzucanie/odbijanie lustrzane obrazu w poziomie + w pionie z css

Question

Próbuję odwrócić obraz, aby go wyświetlić 4 sposoby: oryginalny (bez zmian), odwrócony w poziomie, przewrócony w pionie, odwrócony w poziomie + w pionie.

Aby to zrobić, robiąc poniżej, działa dobrze oprócz klapki poziomo + pionowo, każdy pomysł, dlaczego to nie działa?

Ive popełnił JS skrzypce problemu tutaj: https://jsfiddle.net/7vg2tn83/

.img-hor { 
     -moz-transform: scaleX(-1); 
     -o-transform: scaleX(-1); 
     -webkit-transform: scaleX(-1); 
     transform: scaleX(-1); 
     filter: FlipH; 
     -ms-filter: "FlipH"; 
} 

.img-vert { 
     -moz-transform: scaleY(-1); 
     -o-transform: scaleY(-1); 
     -webkit-transform: scaleY(-1); 
     transform: scaleY(-1); 
     filter: FlipV; 
     -ms-filter: "FlipV"; 
} 

.img-hor-vert { 
     -moz-transform: scaleX(-1); 
     -o-transform: scaleX(-1); 
     -webkit-transform: scaleX(-1); 
     transform: scaleX(-1); 
     filter: FlipH; 
     -ms-filter: "FlipH"; 

     -moz-transform: scaleY(-1); 
     -o-transform: scaleY(-1); 
     -webkit-transform: scaleY(-1); 
     transform: scaleY(-1); 
     filter: FlipV; 
     -ms-filter: "FlipV"; 
} 

Answer 1

Spróbuj tego:

.img-hor-vert { 
    -moz-transform: scale(-1, -1); 
    -o-transform: scale(-1, -1); 
    -webkit-transform: scale(-1, -1); 
    transform: scale(-1, -1); 
} 

Aktualizacja skrzypce: https://jsfiddle.net/7vg2tn83/1/

To nie działa, ponieważ zanim zostały przesłanianie transform w swoim css. Więc zamiast robić oba, po prostu zrobił to ostatnie. Podobnie jak w przypadku dwukrotnego utworzenia background-color, zastąpiłoby to pierwsze.

Answer 2

można zastosować tylko jeden przekształcać reguły dla każdego selektora. Zastosowanie

.img-hor-vert { 
    -moz-transform: scaleX(-1) scaleY(-1); 
    -o-transform: scaleX(-1) scaleY(-1); 
    -webkit-transform: scaleX(-1) scaleY(-1); 
    transform: scaleX(-1) scaleY(-1); 
    filter: FlipH FlipV; 
    -ms-filter: "FlipH FlipV"; 
} 

jestem pewien, który będzie akceptował wiele filtrów IE choć.

Answer 3

Możesz wykonać transform: rotate(180deg); dla klapki poziomej i pionowej.

Answer 4

Aby wykonać odbicie można używać, transformacji właściwości CSS wraz z rotate() funkcji CSS w tym formacie:

transform: rotateX() rotateY(); 

rotateX function() będzie obracać element wzdłuż osi x i funkcja obrót() obróci element wzdłuż osi y. Uważam, że moje podejście jest intuicyjne, ponieważ można wizualizować rotację mentalnie. W przykładzie rozwiązanie wykorzystujące moje podejście byłoby:

.img-hor { 
    transform: rotateY(180deg); // Rotate 180 degrees along the y-axis 
} 

.img-vert { 
    transform: rotateX(180deg); // Rotate 180 degrees along the x-axis 
} 

.img-hor-vert { 
    transform: rotateX(180deg) rotateY(180deg); // Rotate 180 degrees on both 
} 

JS skrzypce wykazać rozwiązanie jest https://jsfiddle.net/n20196us/1/