Görüntüyü yatay olarak + dikey olarak css ile çevirme/yansıtma

Question

Görüntüyü 4 şekilde görüntülemek için çalışıyorum: orijinal (değişiklik yok), yatay olarak ters çevrilmiş, dikey olarak ters çevrilmiş, yatay + dikey olarak çevrilmiş.

Bunu yapmak için aşağıdakileri yapıyorum, yataydan + dikey olarak çevirme dışında iyi çalışıyor, neden bu işe yaramayacak? 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

bu deneyin:

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

Güncelleme keman: https://jsfiddle.net/7vg2tn83/1/

Eğer css transform geçersiz kılma edildi çünkü daha önce çalışma değildi. Yani ikisini de yapmak yerine, sadece sonuncusu yaptı. Benzer şekilde, background-color'u iki kez yapmış olsaydınız, ilkini geçersiz kılardı.

Answer 2

Yalnızca tek bir herhangi seçicinin için kuralı dönüşümü uygulayabilirsiniz:

Ive burada sorunun bir JS keman yaptı. Kullanım

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

IE olsa birden çok filtre kabul edecek emin değilim.

Answer 3

Yatay + dikey çevirme için transform: rotate(180deg); yapabilirsiniz.

Answer 4

, kullanmak bu biçimde döndürme() CSS fonksiyonu ile birlikte bir CSS özelliği dönüştürmek bir yansıması yapmak için: x-ekseni boyunca bir elemanı döner)

transform: rotateX() rotateY(); 

fonksiyonu rotateX (ve rotateY() işlevi y eksenindeki bir öğeyi döndürür. Yaklaşımımı sezgisel olarak zihinsel olarak görselleştirebiliyor diye sezgisel buluyorum. senin örnekte, benim yaklaşımı kullanarak çözüm olacaktır:

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

çözümü göstermek için JS keman https://jsfiddle.net/n20196us/1/