0

Tengo un menu normal de elementos al que quiero que cada letra de cada li a se rote -20 grados contra reloj. Sin embargo estruxture el codigo y no funciona.

Normalmente podemos aplicar cambios a los elementos padres, sin embargo en el caso de los hijos de este elemento no funciona.

Este es mi código:

<!DOCTYPE html>
<html lang="en">

<head>
    <style>       
        .giro {
            transform: rotate(340deg);
        }
    </style>

</head>

<body>
    <h1>Horizontal Menu</h1>

    <nav>
        <ul>
            <li>
                <a href="#" target="_blank" id="i1">
                    <small class="giro">I</small>
                    <small class="giro">n</small>
                    <small class="giro">i</small>
                    <small class="giro">c</small>
                    <small class="giro">i</small>
                    <small class="giro">o</small>
                </a>
            </li>
        </ul>
    </nav>
</body>

</html>

No entiendo porque no funciona la rotacion ya que si la aplico al elemento li si trabaja. La cosa esta es que necesito girar cada letra.

Gracias,

1 respuesta 1

2

Cambiando el diplay debería funcionar. Por ejemplo:

.giro {
    transform: rotate(340deg);
    display: inline-block;
 }
1
  • Gracias funciono al 100%,
    – Angel Diaz
    Commented el 11 oct. 2021 a las 21:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.