css - css 3 立方体翻转变换 - 页面转换 - 使用 twitter bootstrap

Question

问题陈述

我受到这里介绍的立方体翻转变换的启发

我认为当我将用户从一个页面重定向到另一个页面时，进行这样的转换会很棒。

然后在检查 HTML 时，我发现这是对堆叠的 div 执行的效果。

我设法在http://jsfiddle.net/celestialcitizen/WpxX3/14/上复制了这个

现在我的网站是用 Twitter Bootstrap 设计的。所以我决定将我网站的各个页面作为 div 堆叠在一个页面中。我在http://jsfiddle.net/celestialcitizen/Rt4eR/4/尝试失败

1. 任何人都可以帮我纠正它吗？

2. 当我进行这些转换时，我仍然可以确保页面/div 中的元素是可点击的吗？

编辑：

这些 JS Fiddles 必须在 safari 和 Firefox 15.0.1 上查看

Answer 1

我知道已经很晚了，但是我对您的第一次复制做了一些 jQuery 移植：

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

这是第二个：

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

看起来你用navbar-fixed-top引导类和面尺寸和定位搞砸了一切。

请注意e.preventDefault()jQuery 调用，这将使您脸上的任何链接行为无效（即，如果您需要菜单等，请将其删除）。

Answer 2

this example I did about 3D transform might help, you can inspect the css/js/html for details

http://www.css3rubikexperiment.net/

To answer your quetion:

1. The perspective of your transitions box might be wrong. Theses parameter ara a good start.

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

2. Yes, yes you can. After all we talking about div containers