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,