1 <p>Let’s take a little break from form elements and create a transformer icon.</p>

2 <p>A hamburger icon is a glyph that will be familiar to anyone who has used mobile apps and websites. It is used to denote a menu. Usually, when the user clicks on it, a menu appears or the current screen display changes. If we want to return to the previous display, we need to click on the icon again.</p>

3 <p>We can use transforms and transitions to make this icon interactive: we want its appearance to suggest to the user that they can return to the previous display by clicking on it again.</p>

4 <p>So, let’s get started! Let’s use the .menu-icon span::before and .menu-icon span::after pseudo-elements to create a hamburger icon.</p>

5 <p>CSS transforms are used in this and the following examples, which are covered in detail in the<a>“2D transforms” chapter</a>.</p>