#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>Se supone que el código convierte las 3 barras (# 9866) en una "-X" cuando pasamos el cursor sobre el div (menú) usando el formulario de elemento de transformación CSS, pero de alguna manera no lo está haciendo
¿Puedes comprobar el siguiente código? Espero que te funcione
Consulte este enlace: https://jsfiddle.net/yudizsolutions/5x7kefwj/1/
Hicimos cambios en el archivo Html, en lugar de usar código hexadecimal, envolvimos las barras en una etiqueta de intervalo y también hicimos cambios en el archivo CSS aplicando ( tranfrom-origin: right ) ya que establecerá su posición a la derecha en lugar del centro , y al pasar el mouse, hemos aplicado ( transform: rotate( ) ) y ahora obtendrá el resultado deseado.