3D вращающаяся анимированная панель, которая появляется после нажатия на ссылку меню

Question

Мне нужно реализовать эффект, очень похожий на этот, включенный в Kartell.com, нажав на ссылки varoius, особенно "FollowUs" и "Search".

Это трехмерное вращение DIV, которое подталкивает к следующему контенту.

Я пытался исследовать его код с помощью инспектора, но я не нашел плагин, который позволил бы сделать это возможным, может быть, это было бы индивидуальное решение.

Я пытался найти что-то похожее, но самое близкое, что я нашел, - это вращающаяся 3D-навигация, которая в любом случае является более сложной, чем мне нужно.

Короче, мне нужно только:

1. Нажмите на ссылку
2. DIV будет показан с эффектом трехмерного вращения (например, kartell.com)
3. В этом DIV у меня есть поисковая форма или альтернативный список социальных ссылок, точно такой же, как и на сайте со ссылками.

Любое предложение?

Answer 1

На веб-странице 3D Rotating Navigation все объяснено (просто прокрутите немного вниз).

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

И некоторые документы об атрибуте перспективе css http://www.w3schools.com/cssref/css3_pr_perspective.asp

Так в основном

1) Поймать клик 2) Добавить класс, как div-3d-rotate или что-то в DIV вы хотите повернуть 3D при нажатии

Вы должны использовать свойства Trance, перспектива и Transform.

Вам также нужен дополнительный div, который оборачивает div, который вы хотите повернуть. он должен иметь переход для обработки высоты.

Какой-то пример: http://jsfiddle.net/cncpv83a/6/

Answer 2

Что вам нужно, это ссылка и панель. Обработчик щелчков по ссылкам добавляет на панель "активный" или "показанный" класс.

Панель инициализируется с шириной и высотой 0 и требует применения переходов к панели. 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) ;
 }

Смотри мою скрипку

https://jsfiddle.net/cncpv83a/