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

Question

问题陈述

我受到了here

的立方体翻转变换的启发

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

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

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

复制了此内容

现在我的网站设计了Twitter Bootstrap。所以我决定将我网站的各个页面堆叠成一个页面内的div。我在http://jsfiddle.net/celestialcitizen/Rt4eR/4/

尝试失败了

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

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

编辑：

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

Answer 1

我知道现在已经很晚了，但我做了一些jQuery移植你的第一次复制：

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

这是第二个：

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

看起来你用navbar-fixed-top bootstrap类以及面部尺寸和位置弄乱了所有东西。

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

Answer 2

这个关于3D变换的例子可能有帮助，你可以查看css / js / html了解详情

http://www.css3rubikexperiment.net/

回答你的问题：

1. 转换框的视角可能有误。这些参数是一个良好的开端。

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

2. 是的，是的，你可以。毕竟我们谈论的是div容器