CSS 3D變形 - 開卡

我正在製作一個電子賀卡。當用戶點擊卡時，它將打開並顯示其內容。我如何在CSS和JavaScript中做到這一點？我正在使用透視和旋轉，正如你可以看到here。如果您知道一個看起來像我想要做的示例，請發佈鏈接。CSS 3D變形 - 開卡

Example: each color represents a different content.

來源

2012-05-31 José Morais

（http://jsfiddle.net/pYJm6/）我無法弄清楚如何組織的div。 –

@ J.Morais - 好的，試試絕對定位和z-index。這個鏈接（http://www.w3schools.com/Css/css_positioning.asp）對定位有很好的解釋。 – RustyTheBoyRobot

[完成]（http://jsfiddle.net/pYJm6/1/）現在我怎麼能把黃色窗格作爲紅色背面的背面？ –

下面是我合作過的解決方案：

創建一個樣式，做旋轉動畫。
爲動畫（基本上是相同的動畫風格的to部分的最終結果創建一個樣式。
創建一個按鈕或觸發旋轉樣式添加到您的<div>
設置一個在JavaScript超時爲
一旦超時觸發相同的週期動畫，刪除動畫風格，並添加最終的結果風格

Here's a modification of your jsFiddle。獲得回方一道，有一些怪癖，背面必須是PO以便其右側邊緣與前側的左側邊緣對齊。然後，您必須旋轉背面-180度，以便它從頭版後面開始。另外，一旦動畫達到中點，我不得不切換z-索引。

所有這些在這裏很難解釋，所以我致力於an entire blog post它。我創建了一些視覺效果來幫助清楚。

來源

2012-05-31 14:06:41 RustyTheBoyRobot

你能顯示一些代碼嗎？主要的問題是，我不知道如何使用CSS轉換...... –

@ J.Morais - 我寧願不只是交給你代碼;我想幫助你學習。我發現這個網站（http://www.the-art-of-web.com/css/css-animation/）有一些很好的例子。如果你不理解概念，把它放在你的問題中，這樣我們可以幫助你更好地學習。如果你已經嘗試了一些東西，把它放在你的問題中，這樣我們可以幫助你瞭解哪裏出了問題。 – RustyTheBoyRobot

+1您的評論！ – Christoph

還有一個更簡單的解決方案來處理;而不是使用計時器切換z索引，您只需指定元素沒有背面（-webkit-backface-visibility: hidden），並將黃色卡片翻轉180度，使其背面接觸紅色背面。

這樣，您只需要翻轉容納黃色和紅色卡片的容器，這可以通過添加一個類來完成（例如class="card opened"）。

這是你的示例代碼這些變化：[這] http://jsfiddle.net/pYJm6/90/

來源

2012-06-16 13:29:27 marijnvdwerf

不錯的答案;我不知道背面知名度。 – RustyTheBoyRobot

Thnx！畢竟，我們在這裏互相學習！ – marijnvdwerf

CSS 3D變形 - 開卡

回答

相關問題