three dot transform into X symbol using css - html

Question

Hi I have menu which is three dots with animation. I have to transform to X when I click the three dots. The demo link is: demo
HTML:
<div class="dots">
<div class="dot"></div>
</div>
CSS:
html, body {
height: 100%;
background: black;
}
.dots {
position: absolute;
right: 20px;
}
.dot,
.dot:before,
.dot:after {
position: absolute;
width: 6px;
height: 6px;
border-radius: 20px;
background-color: #fff;
transform: rotate(270deg);
cursor: pointer;
}
.dot {
top: 50px;
right: 0;
}
.dot:before,
.dot:after {
content: "";
}
.dot:before {
right: 10px;
transition: right .3s ease-out;
}
.dot:after {
left: 10px;
transition: left .3s ease-out;
}
.dots:hover .dot:before {
right: -10px;
}
.dots:hover .dot:after {
left: -10px;
}
In the current code on hover the dots moves left to right.What I wanted is on hover the the dots should move from it's position and then transform to X on click. Confused how to fix this I want something like hamberger menu but with the dots instead of three lines. Any suggestions?

Answer 1

So the author confirmed, that the following fiddle solved the problem:
https://jsfiddle.net/dhmr44ua/6/
HTML:
<div class="dots">
<label for="toggle"></label>
<input id="toggle" type="checkbox" />
<div class="dot"></div>
</div>
CSS:
html, body {
height: 100%;
background: black;
}
.dots {
position: absolute;
right: 20px;
}
.dots input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
.dots label {
display: inline-block;
cursor: pointer;
position: absolute;
width: 15px;
height: 32px;
top: 38px;
left: -10px;
z-index: 999;
}
.dot,
.dot:before,
.dot:after {
position: absolute;
width: 6px;
height: 6px;
border-radius: 20px;
background-color: #fff;
transform: rotate(270deg);
cursor: pointer;
}
.dot {
top: 50px;
right: 0;
}
.dot:before,
.dot:after {
content: "";
}
.dot:before {
right: 10px;
transition: right .3s ease-out, width .3s ease-out;
}
.dot:after {
left: 10px;
transition: left .3s ease-out, width .3s ease-out;
}
.dots:hover .dot:before {
right: -10px;
}
.dots:hover .dot:after {
left: -10px;
}
.dots input[type=checkbox]:checked ~ .dot:before {
right: -8px;
width: 22px;
transform: rotate(225deg);
}
.dots input[type=checkbox]:checked ~ .dot:after {
left: -8px;
width: 22px;
transform: rotate(135deg);
}
I used the css checkbox trick mentioned in this answer: https://stackoverflow.com/a/13975505/1293849