HTML Academy
The transformer icon, step 1
Smooth transitions23/29
Back to the list of tasks
  • 1. The transition-duration property
  • 2. Transition duration, step 2
  • 3. The transition-property: which properties can be changed smoothly?
  • 4. The transition-delay property
  • 5. The “form” of the transition, transition-timing-function
  • 6. transition-timing-function, step 2
  • 7. transition-timing-function, step 3
  • 8. transition-timing-function, step 4
  • 9. Paper buttons, step 1
  • 10. Paper buttons, step 2
  • 11. Paper buttons, step 3
  • 12. Checkboxes, step 1
  • 13. Checkboxes, step 2
  • 14. Checkboxes, step 3
  • 15. Radio buttons, step 1
  • 16. Radio buttons, step 2
  • 17. Radio buttons, step 3
  • 18. Toggle switches, step 1
  • 19. Toggle switches, step 2
  • 20. Toggle switches, step 3
  • 21. Toggle switches, step 4
  • 22. The transformer icon, step 1
  • 23. The transformer icon, step 2
  • 24. The transformer icon, step 3
  • 25. The transformer icon, step 4
  • 26. Text input field, step 1
  • 27. Text input field, step 2
  • 28. Text input field, step 3
  • 29. Text input field, step 4
The transformer icon, step 3
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The transformer icon, step 2

The hamburger is ready! Now let’s work on its open state, in which it will turn into an arrow.

We will rotate the icon when it is in an open state. We will shorten the upper and lower strips a little so that we can turn them into an arrow “pointer” in the next step.

To switch to the open state, we will add the menu-icon-open class to the icon. Of course, we will perform the class switching using JavaScript on click. But to make the process of creating an arrow more visual, we added a second icon to the HTML code already in its open state.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>The transformer icon, step 2</title> <meta charset="utf-8"> <link rel="stylesheet" href="material.css"> <link rel="stylesheet" href="style.css"> </head> <body class="blue-theme"> <section class="card card-bordered"> <div class="menu-icon"> <span></span> </div> <div class="menu-icon menu-icon-open"> <span></span> </div> </section> </body> </html>
CSS
.menu-icon span { display: block; width: 100%; height: 12px; background-color: #40d47e; } .menu-icon span::before, .menu-icon span::after { display: block; width: 100%; height: 12px; background-color: #40d47e; content: ""; } .menu-icon span::before { transform: translate(0, -24px); } .menu-icon span::after { transform: translate(0, 12px); } .menu-icon-open span { } .menu-icon-open span::before, .menu-icon-open span::after { }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0
    1. Set a width of 60% for .menu-icon-open span::before and .menu-icon-open span::after.
    2. Set a rotate(180deg) transform for .menu-icon-open span.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.