效果比較簡單，這裡總結一下.
1.基本結構
實現方法可能有很多種,我這裡用的是transform: rotatey()方法.
首先結構如下:
由於是反轉的兩層,因此兩層都需要設定position:absolute;讓它脫離文件流.
2.旋轉角度不是180度,而是90度
兩層不是普通的疊加,也不是普通的反轉,而是呈90度的鑲嵌.如圖:
**如下(省略無關**):
a.front-face img
a.front-face p
a.front-face:hover img
a.front-face:hover p
然而,你會發現轉換得十分生硬,可以說是根本沒有旋轉的體驗.因此需要乙個過渡.
過渡,自然想到css3的transition.
a.front-face img
a.front-face p
太好了,到這一步已經能基本旋轉.然而,旋轉得十分不自然,為什麼呢?
我們思考一下,兩層圍繞中心點各自在旋轉90度,第一層在開始轉的時候,第二層也在開始轉.因此旋轉得軌跡就不是乙個圓,而是兩邊都在翻頁.
而正常的旋轉是怎樣的?思考一下,正常的旋轉是應該第一層旋轉90度,然後第二層才開始接著旋轉90度,形成乙個圓的軌跡.
於是乎,剛開始我想到延遲,這裡的旋轉時間是0.2s,因此文字層(第二層)就延遲0.2s不就行了?
a.front-face p第二層延遲是讓滑鼠mouseover旋**然了,但是當滑鼠離開,mouseout的時候動畫會反轉演繹.
這時候文字層(第二層)在正面,它會延遲0.2s開始,但是這時候層(第一層)已經開始轉了,這樣簡直就不是旋轉了.
要做到旋轉和反旋轉都自然是圓的軌跡,怎麼辦呢?
兩種方法:
1.用js,當旋轉結束後,把層和文字層的樣式transition-delay的值交換,乙個延遲0秒,另乙個延遲0.2秒,然後切換兩個延遲值.
//tq:但是這樣就不是純css3實現了,而且十分難處理.
2.思考了各種方法,最後想複雜了,其實可以用opacity(透明度)來解決,層是從1到0,文字層是從0到1,在transition的幫助下,兩個值切換簡單,自然.而且反旋轉也會自動調轉過來,也就是曾0到1,文字層1到0.
a.front-face img
a.front-face p
a.front-face:hover img
a.front-face:hover p
硬體加速十分關鍵,其實這裡我看大神的講解沒太搞明白，不過加一句:transform: translatez(0);可以解決.
CSS3 動畫 水平翻轉
首先，我們在網頁裡面放置 3 個圖示。相應的 html 為 class mega octicon octicon mortar board anim flip span class mega octicon octicon eye anim flip span class mega octicon ...
CSS3實現翻轉 Flip 效果
今天，我們用比較簡潔的css3來實現翻轉效果。當滑鼠滑過包含塊時，元素整體翻轉180度，以實現 正 反 面的切換。分析 container，flip為了實現動畫效果做準備。front,back各包裹一張。實現該效果的html如下 1.元素布局 為了實現以上效果，先進行元素布局。給.front,bac...
CSS3實現翻轉 Flip 效果
class container class flip class front div class back div div div 為了讓卡片的正面和背面在相同位置重疊，給.front,back相對定位.flip進行絕對定位 container,front,back flip front,back ...