今天我们想分享基于一个一个小实验Dribbble射门被比拉尔Mechairia的,所谓的“空间”。我们的想法是,以显示一个交互式房间与几个项目的所有漂浮在三维空间中,并根据鼠标的位置移动。一旦一个项目被点击时,更多的细节弹出。房间之间导航“幻灯片”将旋转不同的墙体部分,并添加一些有趣的动态对整个事情。
注意:一些CSS属性,如3D相关的人,只有在现代浏览器。它不会在IE浏览器
transform-style: preserve-3d
不支持。作为一个验证的概念,这个实现高度实验性的,而且也没有回退为不支持的浏览器preserve-3d
。
实现这样一个基于3D组件是如果一个目的是一路走下去,让一切“真3D”相当棘手。当我们考察的整体思路,它很快变得清晰,我们实际上可以“假”的房间里切出图像和除以他们在那里我们有一个干净的切割墙的角度一部分。就像它是可以旋转的碎片,使其看起来更类似3D的。
我们基本上是在哪里每张幻灯片由具有相应的壁像两个或两个以上部分的幻灯片。然后,我们增加了一些项目这是可以点击的,其中有一些更多的信息扩大。将载玻片然后通过加入动画类的动画。这将触发幻灯片移动,也是内件要做的3D旋转部分,创造一个有点深度。整个场景旋转了一下,以及当我们移动鼠标。
对于移动,我们只是减少了看法与一些媒体查询的帮助下所有项目的列表。
浏览器支持:
- 铬
- 火狐
- 互联网浏览器
- 苹果浏览器
- 歌剧
我们希望你喜欢这个小实验,并发现它有用!
特色图片样机,并从iPhone样机PixelBuddha,MadeByVadim和设计瓦迪姆Scherbakov:iMac电脑样机,iPhone样机。