वाई अक्ष

Question

के आसपास घूर्णन छवि मेरे पास एक छवि है जो दो बराबर भागों में विभाजित है। मैं होवर पर वाई अक्ष के चारों ओर -180 डिग्री (विरोधी घड़ी की दिशा में) छवि के दाहिने हिस्से को घूमने की कोशिश कर रहा हूं।

समस्या कुछ बार (यादृच्छिक रूप से) छवि -180 डिग्री (घड़ी की दिशा में) के बजाय 180 डिग्री (घड़ी की दिशा में) घूमती है। इसके पीछे क्या कारण हो सकता है? मैं क्रोम का उपयोग कर रहा हूँ।

सीएसएस: -

.container { 
    position: relative; 
    margin-top : 10px; 
    width : 500px; 
    height: 330px; 
    -webkit-perspective: 1500px; 
    box-shadow: 3px 3px 13px #AAA; 
} 

.frontDiv { 
    padding: 20px; 
    width: 500px; 
    height: 330px; 
} 

.frontImg { 
    position: absolute; 
    border:1px solid; 
    height : 281px; 
    width : 225px; 
    overflow: hidden; 
    background-image: url('iday.jpg'); 
    transition:all 1s ease-in-out; 
    -webkit-transition:all 1s ease-in-out; 
    backface-visibility : hidden; 
    -webkit-transform-origin:0% 0%; 
} 

.f1 { 
    top: 20px; 
    left:20px; 
    background-position: 0px 0px; 
} 


.f2 { 
    top: 20px; 
    left:245px; 
    background-position: -225px 0px; 
} 

.frontDiv:hover .f2 
{ 
-webkit-transform : rotateY(-180deg); 
} 

एचटीएमएल: -

<article class='container'> 
    <div class='frontDiv'> 
    <div class='frontImg f1'></div> 
    <div class='frontImg f2'></div> 
    </div> 
</article> 

fiddle

Answer 1

ब्राउज़र के कुछ समर्थित नहीं हैं बारी बारी से की तरह, इंटरनेट एक्सप्लोरर 9 (और पिछले संस्करणों) और ओपेरा rotateX या rotateY विधि का समर्थन नहीं करता है।

बाकी

कोशिश

.frontDiv:hover .f2 
{ 
transform: rotateY(-180deg); 
-ms-transform: rotateY(-180deg); /* IE 9 */ 
-webkit-transform: rotateY(-180deg); /* Safari and Chrome */ 
}