<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>grid to list icon</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<article>
<div><span></span>
<span></span>
<span></span></div>
<div><span></span><span></span><span></span></div>
<div><span></span>
<span></span>
<span></span></div>
</article>
</body>
</html>
/*Downloaded from https://www.codeseek.co/alexnewman/grid-to-list-icon-bgPmxp */
body {
background: #c0ff33;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
div {
width: 100%;
height: 10px;
display: flex;
justify-content: space-between;
}
span {
width: 10px;
height: 10px;
-webkit-transform: scale(1) translateZ(0);
transform: scale(1) translateZ(0);
background: #476600;
transition: 0.1s ease transform;
-webkit-transform-origin: left;
transform-origin: left;
display: block;
}
span:first-child {
-webkit-transform-origin: left;
transform-origin: left;
transition: none;
-webkit-transform: scale(1) translateZ(0) !important;
transform: scale(1) translateZ(0) !important;
}
span:last-child {
-webkit-transform-origin: right;
transform-origin: right;
}
article {
width: 50px;
display: flex;
justify-content: space-between;
height: 50px;
flex-direction: column;
}
article:hover span {
-webkit-transform: scale(1.7, 1) translateZ(0);
transform: scale(1.7, 1) translateZ(0);
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Normalize
