Animated 3D Flipping Menu with CSS Example


Содержание

Как сделать Flipping эффект с помощью CSS анимации

CSS анимация — это очень полезная и весёлая штука. С помощью нескольких простых правил можно сделать совсем не обычные и элегантные вещи, которые будут привлекать пользователей своей привлекательно анимацией.

Сегодня мы с Вами научимся делать один из очень интересных эффектов с помощью CSS анимации, а именно переворачивающийся эффект при наведении на изображение, ещё его называют Flipping эффект.

HTML разметка

Так как у нашего блока с картинкой будет две стороны, делаем соответствующую разметку:

У нас есть два класса «front», который отвечает за переднюю часть блока, которая стоит по умолчанию, другими словами — это изображения. И класс «back», который отвечает за отображение внутренней стороны, которая появляется с красивой анимацией при наведении на неё.

Я готов поспорить с Вами, что Вы и ожидать не могли, что правил CSS будет так мало :) Вот, собственно, и все CSS правила:

Переворачивание по вертикали

По умолчанию блок переворачивается по горизонтали, но конечно же можно сделать, чтобы он переворачивался и по вертикальной плоскости, нужно добавить просто несколько CSS правил и всё:

Поддержка Internet Explorer

С браузером Internet Explorer вообще отдельная история, так как нужно переделать практически все правила, так как до сих пор множество их не поддерживается, к сожалению:

Вот и всё, друзья. При совсем небольших усилиях мы сделали сегодня с Вами совершенно не сложный и красивый эффект с помощью CSS анимации. Конечно же это совсем простой пример, который Вы можете доработать или же изменить под свои нужды.

3D flipping navigation menu using CSS

You must be logged in to rate item.

This tweak will turn Divi’s menu into a 3D flipping menu, adding a little animation and character to your website. Go to Blog Post…

Tuts Directory Rating

  • Issue: *
  • Your Name: *
  • Your Email: *

The comment section is for blog post/tutorial rating and reviewing purposes only. If you have any questions about a tutorial, please post them in the tutorial publisher’s website.

Leave a Reply

Looking for a tutorial?

Start Here :

Recently Submitted Tutorials

  • Use Cases of Free Divi Magazine Layout Pack Posted on October 29, 2020
  • Learn how to create login access form on hover Posted on October 22, 2020
  • Learn more about Divi 4.0 Theme Builder Posted on October 19, 2020
  • Use Cases of Free Divi Venture Capital Firm Layout Pack Posted on October 16, 2020
  • Use Cases of Free Divi Bar Layout Pack Posted on October 8, 2020

Divi Web Design Resources :

1. Elegant Themes & Divi Special 20% Off Discount Deal

2. Learn High Income Skills! Get Access To Skillshare’s 22,000 Online Classes For FREE. Click here to redeem

3. Check out Candy Divi Child Themes

4. Learn Divi Hacks From CreaWeb2b Blog

Top Rated Tutorials of This Month

We respect copyright. If anything is wrong, please send an email with all the details.

* Divi is a registered trademark of Elegant Themes, Inc.

* Divi Tutorials Directory is not affiliated with nor endorsed by Elegant Themes.

* Affiliate Disclaimer: Some of the links in this site are affiliate links. If you sign up through them we will earn a small commission, at no extra cost to you. This helps fund our site.

141 CSS Menu

C ollection of free HTML and CSS navigation menu code examples. Update of June 2020 collection. 27 new items.

Цукерберг рекомендует:  Помощь - Помогите решить проблему в JavaScript!

Table of Contents

Author

  • Andrej Sharapov
  • March 22, 2020

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Off-Canvas Menu

Pure CSS off-canvas menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Bennett Feely
  • March 12, 2020

Made with

  • HTML (Slim) / CSS (SCSS) / JS

About the code

Moving Underline Nav Menu

Compatible browsers: Chrome, Firefox, Opera, Safari

Author


  • Animated Creativity
  • March 10, 2020

Made with

About the code

CSS Folding Menu

A simple yet beautiful folding menu made in CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Scott Kennedy
  • March 5, 2020

Made with

About the code

Fun Hover Navigation

Fun navigation effect using CSS keyframes. A quick jump back to the old school.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • seto89
  • March 4, 2020

Made with

About the code

Pure CSS Magic Line Navbar

It’s pure CSS. All links need to have a consistent dimensions for this to work. You have to set everything up yourself in terms of telling the nav how many items there are and where the .line should move to whenever one of the links gets hovered.

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Author

  • Francesca Vago
  • February 26, 2020

Made with

  • HTML / CSS / JS

About the code

Interactive Radial Menu

Interactive radial menu in HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Ibn Al-Khwarizmi
  • February 14, 2020

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About the code

Creative Hamburger Menu

Hamburger menu using the new clip-path CSS property.

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Author

  • Erin McKinney
  • February 7, 2020

Made with

About the code

Circle Menu

nice pure CSS circle menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • tris timb
  • February 7, 2020

Made with

  • HTML / CSS (SCSS)

About the code

Position Sticky Subnav

Sticky subnavigation in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author


  • Andrej Sharapov
  • February 1, 2020

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About the code

Nice Effect For Navigation

Excellent hover and click effect for navigation bar or other.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • steven
  • December 18, 2020

Made with

About the code

CSS only drop down menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Jouan Marcel
  • September 5, 2020

Made with

  • HTML / CSS (SCSS)

About the code

Usable as navigation, menu or effect. It uses CSS transform and perspective to create a unique hololens-like animation effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Jorge
  • August 24, 2020

Made with

  • HTML / CSS / JS

About the code

Jelly Menu

Jelly menu concept in HTML, CSS and JS.

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Author

  • Jove Angelevski
  • July 31, 2020

Made with

  • HTML / CSS (SCSS) / JS

About the code

UI navigation buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Chenius
  • July 30, 2020

Made with

About the code

3D Navbar

3D navbar in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Akhil Sai Ram
  • July 3, 2020

Made with

About the code

Just Another Menu


Pure CSS floating menu animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Jhey
  • July 1, 2020

Made with

  • HTML / CSS (Stylus)

About the code

Pure CSS Menu

Pure CSS menu drawer with off-click.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Piotr Galor
  • June 26, 2020

Made with

About the code

CSS Menu Feat. Emoji

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Leena Lavanya
  • June 26, 2020

Made with

  • HTML / CSS (SCSS) / JS

About the code

Code Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Ryan Mulligan
  • June 26, 2020

Made with

  • HTML / CSS / JS

About the code

CSS Grid Menu Panels

Animated CSS grid-based menu panels. Click the toggle in the top left corner to see it in action.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • ycw
  • June 25, 2020

Made with

About the code

The Menu

Table contents style menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • 0guzhan
  • June 10, 2020

Made with

About the code

Circle Menu

Pure CSS circle menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Mehmet Burak Erman
  • June 3, 2020

Made with

  • HTML (Pug) / CSS (Stylus)


About the code

Perspective Menus

CSS only perspective menus.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Comehope
  • May 15, 2020

Made with

About the code

Reverse text color menu effects.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

  • Speresunko
  • April 28, 2020

Made with

  • HTML / CSS (SCSS) / JS

About the code

Toggle menu in HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Veronica
  • March 10, 2020

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Custom dropdown menu.

Author

  • Stas Melnikov
  • March 5, 2020

Made with

About the code

Hover Effect for Horizontal Menu

Pure CSS fading out for siblings menu options on option hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Ferran Buireu
  • February 17, 2020

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel (jquery.js)

About the code

Responsive Sidebar/Navbar

Vertical/Horizontal responsive sidebar/navbar.

Author

  • Kyle Brumm
  • February 6, 2020

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel (classList.js, smoothscroll.js)

About the code

Off-Canvas Navigation w/Page Transitions

More experimentation with transitions and navigation. Decided to add in a little bit for page transitions as well.

Author


  • azouaoui mohamed
  • December 13, 2020

Made with

  • HTML
  • CSS (bootstrap.css, font-awesome.css)
  • JavaScript (jquery.js, bootstrap.js)

About the code

Sidebar template with drop down menu based on Bootstrap.

Author

  • MAHESH AMBURE
  • September 7, 2020

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Sidebar menu with indicators.

Author

  • JesГєs Castro
  • September 1, 2020

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel (jQuery.js, TweenMax.js)

About the code

Circle Navigation

Experimental navigation menu for a technical website. Built with GreenSock Animation Platform and SVG.

Author

  • Mikael Ainalem
  • August 23, 2020

Made with

  • HTML
  • CSS
  • JavaScript (anime.js)

About the code

A playful animation expanding the submenu on the toolbar in web apps. Translates, fades and morphes SVG icons. Inspired by Virgil Panas more submenu transition on dribbble.

Author

  • Colin Horn
  • August 3, 2020

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Morphing Tab Button With List

Morphing button with a dropdown list beneath it.

Author

  • Glenn McComb
  • June 20, 2020

Made with

  • HTML
  • CSS/SCSS
  • JavaScript


About the code

Radial/Circular Menu Concept

Experimenting with radial menus. Inspired by the right-click-to-expand radial menus of Rust. Change the number of menu items in the bottom right to see how it works with a different number of menu items.

Author

  • Lukasz
  • June 16, 2020

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Nice dropdown menu.

Demo Image: Mega Menu CSS

Mega Menu CSS

Menu in CSS & HTML.
Made by theo sije
June 15, 2020

Demo Image: Fancy Toggle Menu

Fancy Toggle Menu

A fancy toggle menu to edit quickly posts on websites.
Made by Florian Guiffrey
June 14, 2020

Demo GIF: NavMenu

Expandble/collapsable navigation menu.
Made by Mitchell Swaffield
June 12, 2020

Author

  • Boomer
  • June 5, 2020

Made with

  • HTML
  • CSS/Sass (bootstrap.css)
  • JavaScript (jquery.js, bootstrap.js)

About the code

Fixed Navigation Sidebar

This is a layout/design playground for a work project. Utilising Bootstrap instead of Flexbox for IE9/10 support. Will use media queiries to serve pull page menu based on bootstrap breakpoints.

Цукерберг рекомендует:  Php - Не происходит редирект 404 .htaccess при использовании ЧПУ.

Author

  • veronika
  • May 24, 2020

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Fullscreen Menu

Fullscreen menu with Flexbox & jQuery.

Author

  • Milica
  • May 21, 2020

Made with

  • HTML
  • CSS/SCSS (bootstrap.client.css, bootstrap.admin.css, font-awesome.css)
  • JavaScript

About the code

Admin Sidebar

Admin sidebar HTML and CSS menu.

Author

  • Gabrielle Wee
  • May 15, 2020

Made with

  • HTML/Haml
  • CSS/SCSS

About the code

CSS-Only Nested Dropdown Navigation

CSS only nested dropdown navigation with ARIA.

Author

  • naymapl
  • May 4, 2020

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Dropdown menu with jQuery.

Demo Image: Radial Menu Animation

Radial Menu Animation

Mobile radial menu animation with HTML, CSS and JavaScript.
Made by Anton Mudrenok
March 30, 2020

Demo Image: Slide Accordion Menu

Slide Accordion Menu

Slide accordion menu with HTML, CSS and JavaScript.
Made by Anya Melnyk
January 9, 2020

Demo Image: Ribbon Navigation

Ribbon Navigation

SVG Ribbon Navigation. Originally built as a quick prototype for some client work. The code could do with being more dynamic.
Made by Steve Gardner
December 15, 2020

Demo Image: Off-Canvas Menu Animation With Burger Icon

Off-Canvas Menu Animation With Burger Icon

Side menu animation with burger icon with HTML, CSS and jQuery.
Made by Maxime
November 26, 2020

Demo Image: Angled Menu

Angled Menu

Angled menu with HTML, CSS and jQuery.
Made by Keith Light
November 25, 2020

Demo Image: Circular Navigation Concept

Circular Navigation Concept

A new navigation concept with HTML, CSS and JavaScript.
Made by Benedict
November 24, 2020

Demo Image: Menu Shelf

HTML, CSS and JavaScript sliding menu.
Made by Alex Coven
October 29, 2020

Author

  • Em Ji Madhu
  • October 5, 2020

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Real Fullscreen Navigation

A full viewport responsive navigation.

Author

  • Rian Ariona
  • September 21, 2020

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript/Babel

About the code

Style Dropdown Menu

Recently stripe.com Redesign it site, and the primary menu interaction really grab my attention. So here is the simple version of it.

Demo Image: A Clean Navigation Slider

A Clean Navigation Slider

This is a very clean navigation with a cool slider.
Made by Roemerdt
August 20, 2020

Author

  • Andrew Peirs
  • August 17, 2020

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Fullscreen Menu

Simple full screen menu that fades in when menu icon is clicked.

Author

  • Boomer
  • August 2, 2020

Made with

  • HTML
  • CSS/Sass
  • JavaScript (jquery.js)

About the code

CSS Staggered Animation Dropdown Menu

This is a simple example of applying an animation delay to each child of a basic horizontal dropdown navigation menu.

Demo Image: Animated Mobile Navigation

Animated Mobile Navigation

Animated mobile navigation created in Javascript using Greensock.
Made by Greg Hovanesyan
July 11, 2020

Demo Image: Simple jQuery Slide Menu

Simple jQuery Slide Menu

Very simple jQuery slide menu.
Made by P.S.Blakemore
July 10, 2020

Demo Image: Secret UI Project

Secret UI Project

Secret UI Project is prototype mockups created by Anton Aheichanka that has been converted into web version.
Made by Mohan Khadka
July 10, 2020

Author

  • Mahmoud
  • June 23, 2020

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Floating Circular Menu

Pretty floating circular menu with HTML, CSS and JS.

Demo Image: Velocity.js Fullscreen Flexbox Overlay Navigation

Velocity.js Fullscreen Flexbox Overlay Navigation

Fullscreen flexbox overlay navigation with velocity.js.
Made by Mirko Zorić
June 20, 2020

Demo Image: Full Page Off-Canvas Navigation

Full Page Off-Canvas Navigation

An example of how to build a full page navigation that exists off of the screen canvas, sliding into view when clicking the menu option. Added spice with a changing background color depending on navigation item hover.
Made by Caleb Varoga
June 17, 2020

Demo Image: Simple Radial Menu

Simple Radial Menu

HTML, CSS, JavaScript simple radial menu with social icons.
Made by Nikolay Talanov
June 13, 2020

Demo Image: Accordion Menu

Accordion Menu

Simple accordion menu with HTML, CSS and JavaScript.
Made by JuliaRietveld
June 8, 2020

Demo Image: Mobile Filter Menu

Mobile Filter Menu

Filter menu created by Anton Aheichanka that has been converted into web version.
Made by Arjun Amgain
June 1, 2020

40+ CSS3 Button Examples With Effects & Animations

Are you looking for some CSS3 buttons to use in a website project? Here is a list of ones you might like. Some buttons here do use jQuery, but not too lavishly to mess up everything.

CSS3 Button Generator

First of all, check out Sanwebe CSS3 button generator.

Collection Of CSS3 3D Web Buttons

Collection of 3D buttons, created only using CSS3.

CSS3 Social 3D Buttons

Nicely done social buttons only using CSS3 and icon font.

CSS3 Animated Buttons

Circle animated buttons with CSS3 background patterns. Might not work in Firefox 3.6 and IE10.

CSS3 Circle Animated Buttons

Another circle animated buttons, but this time, the text rotation on mouse hover gives really nice effect.

Clean Circle Buttons

Another example of circle CSS3 buttons.

Pure CSS3 Toggle Buttons

Nicely created toggle buttons entirely created using CSS3 and icon font.

CSS3 Animated Button

A nice looking 3d button created using CSS3 and Google fonts.

CSS3 Button Effects

Buttons demonstrate cool animations using different CSS3 properties.

Shiny CSS3 Buttons

Easily create shiny buttons only using CSS3.

3D CSS3 Buttons

It’s pretty amazing what you can do with CSS3 pseudo elements :before and :after. Checkout amazingly done 3d buttons.

CSS3 Switch

A pure-CSS3 button switch example, no javascript used.

3D Flip Button Effect

3D flip button effect on click, created only using CSS3.

Brand Buttons

No effects or animation, just collection of popular brand buttons using CSS and bootstrap icons.

Dark Circled Button

A circle button. Small jQuery code to give blob effect on click.

How to make animated flipping menus using css3?

over 3 years ago

hello Readers , here is a simple blog on animated flipping menus using css3. I have created simple animated menus by using transition and rotate property of css3. In this I have created an unordered list of menus , on mouse hover on a particular menu it will flip and rotate due to CSS property transform and rotate.

Below is the HTML code for the same:

Now we will write the CSS code to perform the above task. Copy the below code in your CSS file .

In the above code, I have used simple fonts Arial and sans-serif and transform property of CSS3 , on mouse hover menu text will rotate on -0 degree and -90 degree on x-axis.

Note- The following example will run on the latest version browsers such as on Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+, and IE 10 .

Flipboard-анимация средствами CSS3 и JavaScript

Добрый день. Наверняка многие видели приложение для iOS под названием Flipboard. При всех его достоинствах, лично меня оно в первую очередь порадовало своими забавными анимациями перелистывания. Родилась идея реализовать нечто подобное для своего сайта исключительно на Javascript и CSS3.

В данном случае я использовал CSS3 свойство transform: rotate3d(. ), которое требует поддержки аппаратного ускорения графики и адекватно работает только в Chrome 16+, поэтому все нужные свойства я ограничил префиксами -webkit-. В продакшене для пользователей с неподходящим параметрами я заменял анимацию на более простую.

Вот так выглядит готовый результат:

Начнем с HTML. Мне хотелось сделать универсальный скрипт, который практически не будет зависеть от исходного html, поэтому в нём содержится только контейнер с нужным классом, изображения и ссылка для старта анимации:

Скрипт выполняет по большей части регуляторную функцию, но первой его задачей является парсинг, поместим url картинок в массив (для удобства использую jQuery):

После того как функция collect_images() отработала, остался пустой контейнер с классом flip-images, нужно заполнить его html шаблоном, который будет содержать все необходимые слои. Каждый раз для анимации перелистывания необходимы две картинки, одна спереди, другая сзади, кроме того каждую картинку необходимо разделить на две части, плюс для пущей реалистичности нужно добавить псевдо-тени.

Цукерберг рекомендует:  Обучение - Помогите с программированием (язык С)

В итоге будет переворачиваться контейнер с классом flip-top перекрывая контейнер flip-bottom.

Теперь осталось разложить нужные картинки в нужные контейнеры, эта роль отведена функции place_images():

Просто кладем картинку с индексом image_index в два контейнера отвечающие за нижнюю и верхнюю часть передней картинки, а следующую картинку кладем в контейнеры для заднего изображения.

В скрипте осталось лишь повесить действие на ссылку для запуска анимации, но этим займемся чуть позже. Перейдем к CSS. Не буду расписывать каждый класс отдельно, они примитивны, лишь прокомментирую ключевые моменты.

На данном этапе все изображения находятся на своих местах, осталось только задать анимации, для этого воспользуемся свойством keyframes.

Основная анимация будет называться flip и будет такой: верхняя часть изображения падает, отбивается от нижней части, взлетая немного вверх и снова падает до упора вниз. Так это будет выглядеть в CSS:

Интервалы и значения поворота подобраны методом проб и ошибок. Аналогичным образом сделаны анимации и для теней:

Осталось описать классы, которые запустят анимации:

Вернёмся к javascript и зададим действие для клика по ссылке с id flip-one-more. По клику соответствующим контейнера должны подставляться нужные картинки, добавляться классы с анимациями и увеличиваться переменная image_index.

В таком виде все будет работать, но анимацию мы увидим только один раз, после повторных кликов по ссылке картинки будут просто переставляться. Все потому, что CSS-анимация — явление одноразовое, её нужно всегда возвращать в исходное положение. Увы, простым удалением присвоенных классов делу не поможешь, но существует один простой, вполне рабочий способ вернуть анимацию на исходную. Нужно удалить и снова добавить блоки, к которым была применена анимация. В итоге окончательный вариант функции для клика выглядит следующим образом:

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

Спасибо за внимание, понимаю, что код далёк от идеала, поэтому буду рад услышать конструктивную критику.

UPD. Добавил в пример параметры с префиксами -moz-, -ms- и -o-, но корректно работает только в Chrome.

UPD2. Если у вас в Chrome 16+ пример отображается с багами, попробуйте включить несколько опций в chrome:flags, а именно:
— Переопределение списка программного рендеринга
— Обработка всех страниц с помощью графического процессора
— Ускоренная прорисовка графическим процессором

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 535f758e1a5a4e4c • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Создайте флип-анимацию CSS3 для меню

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

HTML не может быть изменен, он создан WordPress.

У меня есть меню с подменю, содержащее два элемента.

Я хочу создать анимацию CSS3, которая последовательно сбрасывает дочерние элементы, как в этом примере: http://cssdeck.com/labs/navigation-dropdown-with-flip-effect

Я играл с кодом, найденным в этом ручке http://codepen.io/ganesh_r/pen/tmHsj, но я не вижу ничего похожего на то, что я пытаюсь сделать.

Мой код довольно прост:

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

Любые идеи, как я могу добиться последовательного падения? Мой образец HTML:

Короче говоря, что вам нужно сделать в соответствии с образцом, который вы уже предоставили, это скрыть выпадение с помощью преобразований, а не просто display:none а затем повторно преобразовать его, чтобы показать его при наведении с использованием различных задержек перехода для разных элементов меню в чтобы получить эффект «откидной». Единственное различие между вашим кодом и образцом заключается в том, что, поскольку у вас нет отдельных классов для каждого отдельного li (и не может реально их добавить, так как вы не можете обновить разметку), вам нужно использовать селектор nth-child в вашем CSS применять разные стили к различным элементам li .

Таким образом, стили анимации будут выглядеть следующим образом:

3D Flipping S >

File Size: 5.39 KB
Views Total:
Last Update: 05/08/2020 02:52:00 UTC
Publish Date: 05/07/2020 02:44:22 UTC
Official Website: Go to website
License: MIT

A fancy 3D site navigation concept that reveals a sidebar off-canvas menu by flipping the main content just like a 3D cube. Built using HTML, CSS/CSS3 and JavaScript(jQuery).

How to use it:

1. Create a nav list for the sidebar navigation.

2. Create your own main content as these:

3. The main CSS/CSS3 styles.

4. Load the needed JQuery library at the end of the document.

5. The main JavaScript to toggle CSS classes based on the current menu status.

This awesome jQuery plugin is developed by J Scott Smith. For more Advanced Usages, please check the demo page or visit the official website.

30 примеров CSS анимации

Крутые CSS анимации

Семь анимированных точек двигаются влево и вправо, показывая загрузку.

Симпатичные анимированные эффекты, которые можно использовать на сайтах интернет- магазинов при добавлении товаров в корзину.

Создан на чистом CSS, без использования каких либо скриптов на JS.

Анимированный персонаж 404 от With An Es
Классный пример для 404 страницы, где разработчик работает на ошибками.

Высадка на марс от mgitch
Приземление на Марс. Сделано на CSS.

See the Pen CSS Mars Landing by Mathew Gitchell (@mgitch) on CodePen.

Мстители от mariosmaselli
Герои-Мстители на CSS прямо на вашем сайте. Круто, не правда ли?

See the Pen CSS The Avengers by mario sanchez maselli (@mariosmaselli) on CodePen.

Переключатель День/Ночь от jsndks
Теперь вы можете переключать день и ночь с CSS. Гениальная идея.

Анимация Google Now приложений от codecalm
Сторонние приложения от Google Now, теперь анимированы.

See the Pen clo clo by Judith Neumann (@judag) on CodePen.

Анимированная иконка меню от mariusbalaj
Простая идея анимированной иконки, которая меняется при прокрутке страницы.

Кнопка отправки от auginator
Кликните для потдверждения, и кнопка анимируется с загрузкой процесса, с показом результата.

Эластичный SVG сайдбар в стиле Material Design от suez
Перетащите белую полосу вправо, чтобы увидеть эластичный эффект боковой панели.

Кнопка с частицами от igcorreia
Удивительный эффект при наведении на кнопку.

Вращающаяся кнопка от hakimel
Кнопка с эффектом модального окна.

See the Pen Flipside by Hakim El Hattab (@hakimel) on CodePen.

Мотоцикл от yy
Посмотрите на движущийся мотоцикл.

See the Pen Cruisin’ by Yusuf (@yy) on CodePen.

See the Pen 3d css cube wave by Kai Waddington (@waddington) on CodePen.

Эффект написания текста от drygiel
Вот подпись которая реализована не на GIF формате, а PNG анимации с CSS3.

Подобие GIF анимации от jascha
Посмотрите как фото появляется из пикселей.

See the Pen Gif Style CSS3 Animation by Jascha Goltermann (@jascha) on CodePen.

Анимация для формы от fluxus
Анимированный карандаш появляется, когда текстовая форма в фокусе.

Разноцветный треугольник от felpedefarias
Невероятная оптическая иллюзия, реализованная на CSS3.

Анимированный динозавр Google Chrome от nickspiel
Помните того динозаврика, которого вы можете увидеть когда соединение отсутствует в популярном браузере?

CSS тряска от elrumordelaliz
Наведите курсор, чтобы посмотреть эффект тряски на объектах.

Шагающий робот от P233
Этот робот идет, и идет, и идет…

See the Pen 3D walking robot by Peiwen Lu (@P233) on CodePen.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих