Как изменить анимацию элемента?

Question

[WQP]

Здравствуйте, имеется пример codepen.io/toddsynan/full/pJuyx (самый последний Fold Out), как сделать чтобы он открывался не вниз, а в верх?

Answer 1

[Андрей Б.]

codepen.io/anon/pen/ENNPvZ

В .nav5 li ul заменить на это

...
bottom: 36px;
-webkit-transform: perspective(400) rotate3d(1, 0, 0, 90deg); // 90deg на себя, -90deg от себя
-webkit-transform-origin: 50% 100%;
...

Comments

[Ярослав Иванов]

codepen.io/anon/pen/GNNodw :)

Answer 2

[Андрей Голуменов]

.nav5 ul > li:hover ul {
max-height: 1000px;
-webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
opacity: 1;
}
.nav5 li ul {
position: absolute;
left: 0;
z-index: 1;
max-height: 0;
overflow: hidden;
-webkit-transform: perspective(400) rotate3d(1, 0, 0, 90deg);
-webkit-transform-origin: 50% 100%;
-webkit-transition: 350ms;
-moz-transition: 350ms;
-o-transition: 350ms;
transition: 350ms;
margin-top: -100%;
top: -10px;
opacity: 0;
}

Comments

[Андрей Голуменов]

Нужно изменить у .nav5 li ul
-webkit-transform-origin: 50% 100%;
Так будет вращаться относительно центра низа блока

-webkit-transform: perspective(400) rotate3d(1, 0, 0, 90deg);
Изменить угол вращения на противоположный (90deg)

margin-top: -100%;
Сместить вверх на 100% высоты блока

top: -10px;
Поднять вверх еще на 10 пикселей - отступ у родительского li

opacity: 0;
сделать прозрачным в закрытом состоянии для фикса визуального бага при сворачивании

Также у .nav5 ul > li:hover ul изменить
opacity: 1;
в раскрытом состоянии полностью непрозрачный