Rotazione immagine attorno all'asse y

Question

Ho un'immagine che è divisa in due parti uguali. Sto provando a ruotare la parte destra dell'immagine a -180 ° (in senso antiorario) attorno all'asse y al passaggio del mouse.

Problema: alcune volte (in modo casuale) l'immagine viene ruotata di 180 ° (in senso orario) anziché di -180 ° (in senso antiorario). quale potrebbe essere la ragione di questo? Sto usando 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

Alcuni dei browser non sono supportati ruotare come, Internet Explorer 9 (e versioni precedenti) e Opera non supporta il metodo rotateX o rotateY.

altro provare

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