我有一個圖像被分成兩個相等的部分。我試圖在懸停時圍繞y軸旋轉-180°（逆時針）圖像的右側部分。圍繞y軸旋轉圖像

問題是有時（隨機）圖像旋轉180°（順時針）而不是-180°（逆時針）旋轉。這背後的原因是什麼？我正在使用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

來源

2013-08-19 Aditya Ponkshe

我已經無法看到的錯誤發生。無論如何，我已經添加了你的代碼小提琴;這樣就更容易測試。 – vals

我無法從小提琴中重現此錯誤。 – Bryce

@vals感謝小提琴瓦爾，因爲我在你的小提琴裏一直在順時針方向旋轉。即使在-180度角度下 –

是一些瀏覽器不支持旋轉狀，的Internet Explorer 9（及更早版本）和Opera不支持rotateX或rotateY方法。

別的嘗試

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

來源

2013-08-19 10:55:07 Divyek

我已經在你的代碼中嘗試了這一點..它使用我的firefox 23.0.1 – Divyek

我正在使用chrome，並且我使用了-webkit-transform：rotateY（-180deg）;在我的代碼 –

@shivoham中，儘管真實且相關，但您的回答並沒有解決OP的問題，即使在相同的Chrome瀏覽器上，在後續的鼠標懸停時，懸停過渡並不總是表現相同，也沒有做任何事情在之間。 –

圍繞y軸旋轉圖像

fiddle

回答

相關問題