Día 21: Texto circular con CSS3 y Javascript

Una de las maneras que existen para generar un texto circular es aquella que envuelve a CSS3 y a Javascript para rotar cada letra de un texto de manera incremental. Te enseñaré cómo se hace.

Demo

Roma tibi subito motibus ibit amor

Código

Primero que nada apuntaremos al elemento que queremos rotar y lo seleccionaremos a través de un ID.

circ = document.getElementById('circular');
textarr = circ.textContent.split('');
circ.textContent = '';

Después de eso, podremos obtener su texto con circ.textContent y hacer un circ.split('') para obtener un array del texto. Después vaciaremos el elemento principal para poder escribir el nuevo texto.

Ahora recorreremos todo el array y lo agregaremos a nuestro elemento, rotando de manera proporcional el texto.

for (var i=0; i<textarr.length; i++) {
  circ.innerHTML += '<span style="-webkit-transform: rotate('+((i+1)*10)+'deg);transform: rotate('+((i+1)*10)+'deg);">'+textarr[i]+'</span>';
}

Estamos haciendo la suma y multiplicación incremental dentro del loop (i+1)*10 nos dará el resultado de una rotación constante, esto se lo agregaremos a cada span con las propiedades CSS3 de transform: rotate(#deg);. Te recomiendo ajustar esto dependiendo de la longitud de tu texto y tus necesidades.

h1#circular span {
  font-size: 30px;
  font-family: 'MonoSpace';

  width: 20px;
  height: 140px;

  position: absolute;
  left: 0;
  top: 0;

  transform-origin: bottom center;
  -webkit-transform-origin: bottom center;
  text-transform: uppercase;
}

Y por último hacemos los ajustes correspondientes para que la rotación sea exitosa con un poco de CSS3 en nuestra hoja de estilos.


palabras / Compartir en: Facebook , Twitter o copiar enlace