CSS 3立方體翻轉變換 - 在頁面過渡 - 使用Twitter的引導

Question

問題描述

我被立方體翻轉啓發變換呈現here

我想這將是巨大的，有這樣的轉變，當我重定向用戶從一個頁面到另一個頁面。

然後在檢查HTML時，我發現這是對堆疊div執行的效果。

我設法在http://jsfiddle.net/celestialcitizen/WpxX3/14/

現在我的網站的設計與Twitter的引導複製此。因此，我決定將我的網站的各個頁面作爲div放在一個頁面中。我有一個失敗的嘗試在http://jsfiddle.net/celestialcitizen/Rt4eR/4/

1. 任何人都可以幫我糾正它嗎？

2. 當我做這些轉換我仍然可以確保頁/ div內的元素是可點擊的嗎？

編輯：

這些JS小提琴必須在Safari和Firefox 15.0.1

Answer 1

我知道這是晚了，但我做了你的第一個複製的jQuery移植的一點點：

http://jsfiddle.net/celestialcitizen/WpxX3/14/

而這裏的第二個：

http://jsfiddle.net/Rt4eR/11/

它看起來像你搞亂了所有與navbar-fixed-top bootstrap分類s並且與面孔維度和定位。

請注意jQuery調用e.preventDefault()，這會導致您面部的任何鏈接行爲失效（即，如果您需要菜單等，請將其刪除）。

Answer 2

這個例子，我做了關於3D變換可以幫助，您可以檢查的CSS/JS/HTML查看詳情

http://www.css3rubikexperiment.net/

要回答你的quetion：

1. 轉換框的視角可能是錯誤的。這些參數是一個很好的開始。

   -webkit-perspective: 800; 
   -webkit-perspective-origin: 50% 90px; 
   -webkit-transition: -webkit-perspective, 1s; 
   -webkit-transform: scale(0.6); 
   

2. 是的，是的，你可以。畢竟，我們談論的div容器