सीएसएस

Question

के साथ क्षैतिज रूप से एक छवि को फ्लिप/मिरर करें। मैं छवि को 4 तरीकों से प्रदर्शित करने की कोशिश कर रहा हूं: मूल (कोई परिवर्तन नहीं), क्षैतिज रूप से फ़्लिप किया गया, लंबवत फ़्लिप किया गया, क्षैतिज रूप से + लंबवत फ़्लिप किया गया।

ऐसा करने के लिए मैं नीचे कर रहा हूं, यह फ्लिप क्षैतिज + लंबवत से अलग काम करता है, कोई विचार यह क्यों काम नहीं करेगा? 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

इस प्रयास करें:

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

अपडेट किया गया बेला: https://jsfiddle.net/7vg2tn83/1/

यह पहले क्योंकि आप अपने सीएसएस में transform अधिभावी गया काम नहीं कर रहा था। तो दोनों करने की बजाय, यह आखिरी बार किया। अगर आप background-color दो बार करते हैं तो यह क्रमबद्ध करें, यह पहले व्यक्ति को ओवरराइड करेगा।

Answer 2

आप केवल एक ही किसी भी चयनकर्ता के लिए नियम बदलने आवेदन कर सकते हैं:

Ive यहां मुद्दा यह है की एक जे एस बेला बना दिया। उपयोग

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

मैं अनिश्चित जो आईई हालांकि एकाधिक फिल्टर स्वीकार करेंगे।

Answer 3

आप क्षैतिज + लंबवत फ्लिप के लिए transform: rotate(180deg); कर सकते हैं।

Answer 4

एक प्रतिबिंब आप उपयोग कर सकते हैं इस प्रारूप में घुमाने() सीएसएस समारोह के साथ सीएसएस संपत्ति को बदलने के लिए प्रदर्शन करने के लिए:

transform: rotateX() rotateY(); 

समारोह rotateX() x- अक्ष एक तत्व रोटेट करके फ़ंक्शन घुमाने वाला वाई() y-axis के साथ एक तत्व घुमाएगा। मैं अपने दृष्टिकोण को सहज महसूस करता हूं जिसमें मानसिक रूप से घूर्णन को कल्पना कर सकते हैं। अपने उदाहरण में, मेरा दृष्टिकोण का उपयोग कर समाधान होगा:

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

समाधान प्रदर्शित करने के लिए जे एस बेला https://jsfiddle.net/n20196us/1/