一些簡單實用的小技巧，CSS3對圖片進行翻轉，顯示另一面的文字，或者圖片效果，那么具體怎樣去做呢？一起來看看吧。
在CSS3中，可以使用transform-style: preserve-3d進行3d的轉換。那么具體怎么用呢？
首先來看HTML部分：
先使用一個大的div把想要顯示的正面和反面內容正常顯示出來，設置好需要的寬高。在大的div中包含要變換的內容，所以需要在父元素，即.fox類中設置transition-style來進行3d變換。這種變換不是一下就直接完成的，所以使用transition設置一個變換的時間。然后當鼠標移動到大的大div塊上的時候，進行Y軸的180deg變換。在這里顯示文字的div進行翻轉后，文字的顛倒過來的，所以需要對文字div初始狀態設置一個rotateY(180deg)，這樣文字就會翻轉過來就是正常的狀態。
然后我們需要對兩個子div進行設置層定位。首先我們在父div中設置一個相對定位，然后對兩個子div設置絕對定位，使其在原有文檔流的定位丟失，這樣他們就會層疊在一起。
效果圖如下：
初始狀態：
翻轉后：