Давайте немного отдохнём от элементов форм и создадим трансформирующуюся иконку.

«Иконка-гамбургер» — привычный для мобильных приложений и сайтов глиф, обозначающий меню. Обычно по клику на него появляется меню или меняется текущее отображение экрана. И, чтобы вернуться к прежнему отображению, нужно снова нажать на иконку.

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

Итак, начнём! Воспользуемся псевдоэлементами .menu-icon span::before и .menu-icon span::after для создания «иконки-гамбургера».

В этом и следующих примерах используются трансформации CSS, которые подробно разбираются в части «Двумерные трансформации».