Question

我需要实现与Kartell.com中包含的效果非常相似的效果，点击varoius链接，尤其是＆＃34; FollowUs ＆＃34;和＆＃34; 搜索＆＃34;。

这是DIV的3D旋转，在内容之后推到底部。

我尝试使用检查器调查其代码，但我没有找到能够实现此功能的插件，可能是一个自定义解决方案。

我试图找到类似的东西，但我发现的最近的是3D Rotating Navigation，无论如何我都需要更复杂。

简而言之，我只需要：

点击链接
DIV将显示3D旋转效果（如 kartell.com）
在这个DIV中，我有一个搜索表单或替代列表社交链接，与链接网站完全相同。

有什么建议吗？

Answer 1

在网页上3D旋转导航解释了所有内容（只需向下滚动一下）。

/* enable a 3D-space for children elements */
perspective: 1000px;
transform: translateY(-100%);

关于透视css属性的一些文档 http://www.w3schools.com/cssref/css3_pr_perspective.asp

基本上

1）抓住点击 2）在点击时想要3D旋转的div中添加类似div-3d-rotate或类似的类

您应该使用tranisition，perspective和transform css属性。

您还需要一个额外的div来包装您想要旋转的div。它应该有一个过渡来处理高度。

某种示例：http://jsfiddle.net/cncpv83a/6/

Answer 2

您需要的是链接和面板。链接上的点击处理程序会添加一个“有效”状态。或者＆＃39;显示＆＃39;小组成员。

面板初始化为宽度和高度0，需要将过渡应用于面板。显示＆＃39;的css。或者＆＃39;活跃的＆＃39; class使用旋转进行变换。

HTML：

<div class="invoke">Invoke</div>
<div class="panel">
  Yes this is the panel
</div>

使用Javascript：

$('.invoke').click(function(){
  $(".panel").addClass("show");
});

CSS：

.panel{
   overflow: hidden;
   width: 0;
   height: 0;
   margin: 100px;
   background-color: #ff0000;
   /* Firefox */
   -moz-transition: all 1s ease;
   /* WebKit */
   -webkit-transition: all 1s ease;
   /* Opera */
   -o-transition: all 1s ease;
   /* Standard */
   transition: all 1s ease;
 }

.panel.show{
   width: 500px;
   height: 500px;
   /* Firefox */
   -moz-transform: rotate(360deg);
   /* WebKit */
   -webkit-transform: rotate(360deg) ;
   /* Opera */
   -o-transform: rotate(360deg) ;
   /* Standard */
   transform: rotate(360deg) ;
 }

看我的小提琴

https://jsfiddle.net/cncpv83a/

单击菜单链接后显示的3D旋转动画面板

2 个答案: