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

Question

我需要实现与 Kartell.com 中包含的非常相似的效果，点击各种 links，尤其是“FollowUs”和“搜索”。

它是一个DIV的3D旋转，将下面的内容推到底部。

我试图用 inspector 调查它的代码，但我没有找到一个插件可以实现这一点，也许可以是一个自定义解决方案。

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

简而言之，我只需要：

单击 link
一个DIV会显示3D旋转效果（比如 kartell.com)
在这个 DIV 我有一个搜索表单或替代列表社交 links，与 linked 网站完全相同。

有什么建议吗？

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) 添加一个 class 比如 div-3d-rotate 或其他东西到 div 你想要在点击时 3D 旋转

您应该使用过渡、透视和变换 css 属性。

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

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

Answer 2

您需要的是 link 和面板。 link 上的点击处理程序将 'active' 或 'shown' class 添加到面板。

面板初始化为宽度和高度 0，需要对面板应用过渡。 'shown' 或 'active' class 的 css 进行旋转变换。

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) ;
 }

看我的fiddle

https://jsfiddle.net/cncpv83a/

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

3D rotating animated panel that shows up after click on a menu link

html

css

jquery

css-transforms

css-animations