CSS3實現翻轉 Flip 效果

今天，我們用比較簡潔的css3來實現翻轉效果。

當滑鼠滑過包含塊時，元素整體翻轉180度，以實現「正」「反」面的切換。

分析：.container，.flip為了實現動畫效果做準備。.front,.back各包裹一張。

實現該效果的html如下：

為了實現以上效果，先進行元素布局。給.front,.back相對.flip進行絕對定位,讓他們在相同位置重疊。

布局部分**如下：

.container,.front,.back

.flip
.front,.back

w3 spec中描述：

2. 動畫效果的實現

(1) 為了實現動畫效果首先給祖先元素.container,.flip設定以下屬性，以觸發3d效果和設定動畫：

.container

.flip

.front,.back

(3)為了讓滑鼠滑過包含塊時，包含塊翻轉180度，以實現「正」「反」面的切換。給背面的元素設定transform:rotatey(-180deg)，這時我們將無法看到.back。

(4)最後，當使用者的滑鼠滑過.container包含塊時,.flip翻轉180度，這樣，.front翻轉180度，由於背面是hidden，無法看見；而.back翻轉180度後，回到0度，以正面示人，這樣我們就能看到背面了。

**如下：

.container

.container,.front,.back
.flip
.front,.back
.front
.back
.container:hover .flip

請注意：在上面的css**中，我並未給.flip設定寬高，所以當給.flip應用transform:rotatey(180deg)時，按照預設的transform-origin值，是以元素的中心點為基本點翻轉的。這裡.flip的高度是0，所以當然是以頂部的那條線為基礎翻轉。所以解決的辦法有二：

給.flip設定和.front,.back相同的寬高。

給.flip設定transform-origin:100% 135px/*高度的一半*/屬性。

ok,這樣你就會發現垂直翻轉是你想要的效果了！

1. 思路

（1）最外層元素設定perspective以實現3d效果。

（2）當滑鼠滑過最外層元素時，第二包裹層翻轉180度，同時設定過渡速度。

（3）兩個翻轉塊絕對定位，以致實現相同位置的疊加。同時設定backface-visibility避免在實現動畫效果時露出背面。

（4）給.front設定z-index屬性使它在寫**和展示時都在前面。

（5）讓.back最開始就翻轉180度，以背面示人。

2. 遇到的問題：

（1）為了讓兩個尺寸不一的在包裹塊中大小一致，使用了overflow屬性，無法實現3d效果。解決方法：給img設定width:100%;height:100%;

（2）沒有意識到.flip的高度為0，所以在垂直翻轉時標準點錯誤導致效果不一樣。

（3）多寫才能發現多的錯誤，才知道怎麼找錯誤，怎麼解決錯誤。

talk is cheap,show me the code.

CSS3實現翻轉 Flip 效果

class container class flip class front div class back div div div 為了讓卡片的正面和背面在相同位置重疊，給.front,back相對定位.flip進行絕對定位 container,front,back flip front,back ...

CSS3實現翻轉卡牌效果

今天在工作中遇到需求，需要用css3寫乙個卡片翻轉效果，這個效果看起來簡單，但是還是涉及到一些不常用的css3中的3d轉換的屬性以及實現該效果的思路，所以這裡總結一下。目前瀏覽器都不支援perspective屬性 在chrome和safari中需要使用 webkit perspective，而在fi...

css3實現色子自動翻轉效果

css3使我們能夠跳出2d空間，實現3維空間的動畫效果，這裡給出乙個自動翻轉的3d色子動畫效果製作過程。第一步，首先進行html的布局，對於3d效果，布局有一定的規律，如下 在body中定義乙個叫做outer的div，它是最外層的div，用來提供乙個3d場景，可以認為它是乙個3d圖形的展示平台，只有...