icon cannot be affected when hover - html

Question

When hover, I would like to translate an icon but CSS is not be effectible to it.
#humberger {
position: relative;
height: 24px;
width: 24px;
display: inline-block;
box-sizing: border-box;
}
#humberger div {
position: absolute;
left: 0;
height: 4px;
width: 24px;
background-color: #444;
border-radius: 2px;
box-sizing: border-box;
}
#humberger div:nth-of-type(1) {
top: 0;
}
#humberger div:nth-of-type(2) {
top: 10px;
}
#humberger div:nth-of-type(3) {
bottom: 0;
}
#humberger:hover {
div:nth-of-type(1) {
transform: rotate(20deg);
}
div:nth-of-type(2) {
transform: translateX(100px);
background: rgba(255, 255, 255, 0);
}
div:nth-of-type(3) {
transform: rotate(-20deg);
}
}
<div id="humberger">
<div onclick='openNav()'></div>
<div onclick='openNav()'></div>
<div onclick='openNav()'></div>
</div>
<span class='icon-title'>Open</span>
I am expecting the translation like below.
If someone gave me any knowledge to solve this, I would be very happy.

Answer 1

I think your CSS notation is not valid.
Try this structure instead:
#humberger:hover > div:nth-of-type(1){
transform: rotate(20deg);
cursor: pointer;
}
(tested and works)

Answer 2

Plz try this code..
css
#humberger div{
position: absolute;
left:0;
height:4px;
width: 24px;
background-color: #444;
border-radius: 2px;
box-sizing: border-box;
transition: 0.5s all ease 0s;
}
#humberger:hover div {
transition: 0.5s all ease 0s;
}
#humberger div:nth-of-type(1){
top:0;
}
#humberger div:nth-of-type(2) {
top: 10px;
}
#humberger div:nth-of-type(3) {
bottom:0;
}
#humberger:hover div:nth-of-type(1){
transform: rotate(45deg);
top: 10px;
}
#humberger:hover div:nth-of-type(2){
background: rgba(255, 255, 255, 0);
}
#humberger:hover div:nth-of-type(3){
transform: rotate(-45deg);
bottom: 10px;
}

Answer 3

Add transition time & transition-origin and adjust the degree of rotation.
#humberger div{
position: absolute;
left:0;
height:4px;
width: 24px;
background-color: #444;
border-radius: 2px;
box-sizing: border-box;
transition: .2s; /*Add transition time*/
transform-origin: 100% center; /*Add transform origin*/
}
#humberger:hover{
div:nth-of-type(1){
transform: rotate(-55deg); /*Adjust angle*/
}
div:nth-of-type(2){
transform: translateX(100px);
background: rgba(255, 255, 255, 0);
}
div:nth-of-type(3){
transform: rotate(55deg); /*Adjust angle*/
}
}

Answer 4

kindly follow the SASS Structure.
this is the SASS Code for your structure:
#humberger {
position: relative;
height: 24px;
width: 24px;
display: inline-block;
box-sizing: border-box;
div{
position: absolute;
left:0;
height:4px;
width: 24px;
background-color: #444;
border-radius: 2px;
box-sizing: border-box;
transition: all 0.3s;
&:nth-of-type(1){
top:0;
}
&:nth-of-type(2) {
top: 10px;
}
&:nth-of-type(3) {
bottom:0;
}
}
&:hover{
div{
&:nth-of-type(1){
transform: rotate(45deg);
top: 0;
bottom: 0;
margin: auto;
}
&:nth-of-type(2){
transform: translateX(100px);
background: rgba(255, 255, 255, 0);
}
&:nth-of-type(3){
transform: rotate(-45deg);
top: 0;
bottom: 0;
margin: auto;
}
}
}
}
this is the code snippet with normal css.
#humberger {
position: relative;
height: 24px;
width: 24px;
display: inline-block;
box-sizing: border-box;
}
#humberger div {
position: absolute;
left: 0;
height: 4px;
width: 24px;
background-color: #444;
border-radius: 2px;
box-sizing: border-box;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#humberger div:nth-of-type(1) {
top: 0;
}
#humberger div:nth-of-type(2) {
top: 10px;
}
#humberger div:nth-of-type(3) {
bottom: 0;
}
#humberger:hover div:nth-of-type(1) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 0;
bottom: 0;
margin: auto;
}
#humberger:hover div:nth-of-type(2) {
-webkit-transform: translateX(100px);
transform: translateX(100px);
background: rgba(255, 255, 255, 0);
}
#humberger:hover div:nth-of-type(3) {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 0;
bottom: 0;
margin: auto;
}
<div id="humberger">
<div onclick='openNav()'></div>
<div onclick='openNav()'></div>
<div onclick='openNav()'></div>
</div>
<span class='icon-title'>Open</span>
the above SASS code is work same like the Snippet.
I hope this answer will helpful to you.
Thank You...