Lật/phản chiếu hình ảnh theo chiều ngang + theo chiều dọc với css

Question

Cố gắng lật hình ảnh để hiển thị 4 cách: ban đầu (không thay đổi), lộn theo chiều ngang, lật theo chiều dọc, lật theo chiều ngang + theo chiều dọc.

Để làm điều này Im làm như dưới đây, nó hoạt động tốt ngoài việc lật theo chiều ngang + theo chiều dọc, bất kỳ ý tưởng tại sao điều này sẽ không hoạt động?

Ive đã fiddle JS của vấn đề ở đây: 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

Hãy thử điều này:

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

fiddle Cập nhật: https://jsfiddle.net/7vg2tn83/1/

Nó không được làm việc trước bởi vì bạn đã trọng các transform trong css của bạn. Vì vậy, thay vì làm cả hai, nó chỉ là người cuối cùng. Sắp xếp giống như nếu bạn đã thực hiện background-color hai lần, nó sẽ ghi đè lần đầu tiên.

Answer 2

Bạn có thể áp dụng duy nhất một chuyển đổi quy tắc cho bất kỳ công cụ chọn. Sử dụng

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

Tôi không chắc chắn IE sẽ chấp nhận nhiều bộ lọc.

Answer 3

Bạn có thể thực hiện transform: rotate(180deg); cho lật ngang + dọc.

Answer 4

Để thực hiện một sự phản ánh bạn có thể sử dụng, chuyển đổi sở hữu CSS cùng với xoay() chức năng CSS trong định dạng này:

transform: rotateX() rotateY(); 

Chức năng rotateX() sẽ xoay một yếu tố dọc theo trục x và hàm rotateY() sẽ xoay một phần tử dọc theo trục y. Tôi tìm thấy cách tiếp cận của tôi trực quan trong đó có thể hình dung luân chuyển tinh thần. Trong ví dụ của bạn, giải pháp sử dụng cách tiếp cận của tôi sẽ là:

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

Các fiddle JS để chứng minh giải pháp là https://jsfiddle.net/n20196us/1/