class
="container"
>
class
="flip"
>
class
="front"
>
div>
class
="back"
>
div>
div>
div>
為了讓卡片的正面和背面在相同位置重疊，給.front,.back相對定位.flip進行絕對定位
.container, .front, .back
.flip
.front, .back
.front
設定3d效果和動畫
.container
.flip
設定背面隱藏
.front, .back
設定反轉效果
滑鼠沒放上去之前讓背面旋轉180度，以背面示人
滑鼠經過的時候 flip就翻轉180度
.back
.container:hover .flip
垂直翻轉和水平翻轉的區別
垂直效果與水平翻轉異曲同工
但是如果你只是把rotatey換成rotatex
那麼你會發現是以頂部的那條線翻轉的。
因為預設的transform-origin值，是以元素的中心點為基本點翻轉的。
解決方法：
(1). 給.flip設定和.front,.back相同的寬高。
(2). 給.flip設定transform-origin:100% 150px/高度的一半/屬性。
ie的適配
需要針對ie對這段標準的卡片翻轉**進行特殊的修改，因為ie還沒有實現現代瀏覽器中的transform功能。基本的做法就是對正面和背面兩個卡片同時分別翻轉。
如何用css3來實現卡片的翻轉特效
css翻轉動畫技術詳解
CSS3實現翻轉 Flip 效果
今天，我們用比較簡潔的css3來實現翻轉效果。當滑鼠滑過包含塊時，元素整體翻轉180度，以實現 正 反 面的切換。分析 container，flip為了實現動畫效果做準備。front,back各包裹一張。實現該效果的html如下 1.元素布局 為了實現以上效果，先進行元素布局。給.front,bac...
CSS3實現翻轉卡牌效果
今天在工作中遇到需求，需要用css3寫乙個卡片翻轉效果，這個效果看起來簡單，但是還是涉及到一些不常用的css3中的3d轉換的屬性以及實現該效果的思路，所以這裡總結一下。目前瀏覽器都不支援perspective屬性 在chrome和safari中需要使用 webkit perspective，而在fi...
css3實現色子自動翻轉效果
css3使我們能夠跳出2d空間，實現3維空間的動畫效果，這裡給出乙個自動翻轉的3d色子動畫效果製作過程。第一步，首先進行html的布局，對於3d效果，布局有一定的規律，如下 在body中定義乙個叫做outer的div，它是最外層的div，用來提供乙個3d場景，可以認為它是乙個3d圖形的展示平台，只有...