#menu{
transition-duration: 1s;
transition-timing-function: ease-out;
}
#menu:hover div:nth-of-type(1){
transform-origin: top;
transform: rotate(45deg);
transition-duration: 1s;
transition-timing-function: ease-out;
}
#menu:hover div:nth-of-type(3){
transform-origin: 1px bottom;
transform: rotate(-45deg);
transition-duration: 1s;
transition-timing-function: ease-out;
}
#menu:hover div:nth-of-type(2){
transform: translateX(-10px);
transition-duration: 1s;
transition-timing-function: ease-out;
}<html>
<head></head>
<body>
<div id="menu" >
<div class="bar" id="br1">⚊</div>
<div class="bar" id="br2">⚊</div>
<div class="bar" id="br3">⚊</div>
</div>
</body>The code is supposed to turn the 3 bars (⚊) into a "-X" when we hover over the div(menu) by using the transform element form CSS but It's somehow not doing so
Can you please check the below code? Hope it will work for you
Please refer to this link: https://jsfiddle.net/yudizsolutions/5x7kefwj/1/
We have made changes in the Html file, instead of using hexcode we have wrapped the bars in a span tag and also made changes in the CSS file by applying (tranfrom-origin: right) as it will set its position on right instead of center, and on hover, we have applied ( transform: rotate( ) ) and now you will get the desired output.