使一個三維CSS3元件旋轉汽車無

我已經實現其圍繞使用基於在http://css3playground.com/flip-card.php實施例的CSS3 transform: rotateY()屬性Y軸的簡單雙面元件。使一個三維CSS3元件旋轉汽車無

我可以讓它在懸停或設定的時間間隔內旋轉，但我試圖讓它不斷旋轉。我有下面的腳本，但是我很難「重置」轉換，使它看起來只向一個方向旋轉，到目前爲止它只是來回擺動。

setInterval(function() { 
     $('.hover').removeClass('reverse').addClass('flip'); 
    setTimeout(function() { 
     $('.hover').removeClass('flip').addClass('reverse') 
    }, 1500); 
}, 3000);

我會爲您提供CSS，它基本上與該示例頁面上的內容相同。然而，.reverse類只是一個.flip克隆，與transform: rotateY()值，試圖將其帶回開始在同一方向。

來源

2013-08-24 Bobe

能否請您提供的jsfiddle？ –

也許你不應該使用'reverse'類;只是說。 –

查看答案 - http://stackoverflow.com/a/38202760/104380 – vsync

您需要使用關鍵幀動畫。應該是這樣的。

 @-webkit-keyframes rotate-full { 
      0% { 
      -webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); 
      } 

      50% { 
      -webkit-transform: rotateY(180deg) rotateX(180deg) rotateZ(180deg); 
      } 

      100% { 
      -webkit-transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg); 
      } 
     }

繼承人在我做了一段時間的演示的例子。

http://codepen.io/jeffpowersd/pen/mCbhq

來源

2013-08-25 03:23:55 Jeffpowrs

使一個三維CSS3元件旋轉汽車無

回答

相關問題