- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>The transformer icon, step 3</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 {
transform: rotate(180deg);
}
.menu-icon-open span::before,
.menu-icon-open span::after {
width: 60%;
}
.menu-icon-open span::before {
}
.menu-icon-open span::after {
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- Assign the
translate(45px, -14px)transform to.menu-icon-open span::before, - and then additionally rotate it
rotate(45deg). - Assign the
translate(45px, 2px)transform to.menu-icon-open span::after, - and then additionally rotate it
rotate(-45deg).
Comments