使网站成为一个真正的立方体

Make a website become a real cube

本文关键字:一个 立方体 网站      更新时间:2023-09-26

我最近发现了CSS/JS动画,如Meny: http://github.com/hakimel/meny问题是,它只会让一边离开屏幕。我的目标是,做一个完整的立方体网站。

想法:我正在使用技术来创建使用web技术的本地应用程序。为了让事情看起来真的很棒,我想实现3D动画。问题是,我不想过多地填充我的主要观点,所以我想实际上有五个或六个面,这取决于可能性有多大。想象一下,Meny的四个选项都被激活了——上、下、左、右。所以当用户将他们的courser移动到顶部或其他任何一边时,他们会看到其中一个单独的面孔。底部的那个会有一个小控制台窗口。左边是搜索。右边将保存一些信息和触发器,顶部是实际的菜单。中心,始终可见的面,将容纳动态加载的内容。这样,我就可以使用侧面来触发AJAX对主侧面的调用。

我如何才能实现这样一个动画立方体的设计?第六面,在正面的背面,可能是一个更详细的控制台版本,有实际的输入等等……一个终端,某种意义上。

我使用的桌面技术是appJS。它还不支持3D,所以我会尝试不同的技术。我将在Safari中调试界面本身。

这对于CSS 3D转换来说应该不难做到。看看这些:

http://desandro.github.io/3dtransforms/docs/cube.html

和一个演示:

http://desandro.github.io/3dtransforms/examples/cube-02-show-sides.html