Obracanie obrazu wokół osi Y

Question

Mam obraz, który jest podzielony na dwie równe części. Próbuję obrócić prawą część obrazu w -180 ° (przeciwnie do ruchu wskazówek zegara) wokół osi Y po najechaniu myszą.

Problem to kilka razy (losowo) obraz jest obracany o 180 ° (w prawo) zamiast -180 ° (przeciwnie do ruchu wskazówek zegara). jaki może być tego powód? Używam chrome.

css: -

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

html: -

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

fiddle

Answer 1

Niektóre z przeglądarek nie są obsługiwane obracać jak, Internet Explorer 9 (i wcześniejsze wersje) i Opera nie obsługuje metody rotateX lub rotateY.

jeszcze spróbować

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