css 3立方体翻转转换-页面转换-使用twitter引导

Question

问题说明

展示的立方体翻转变换给了我灵感

我想，当我将用户从一个页面重定向到另一个页面时，有这样的转换会很好。

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

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

现在我的网站是用Twitter引导程序设计的。因此，我决定将我的网站的各个页面作为div堆叠在一个页面中。我在http://jsfiddle.net/celestialcitizen/Rt4eR/4/

1. 有人能帮我纠正吗？

2. 当我进行这些转换时，我还能确保page/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

我做的这个关于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容器