La mayoría de los navegadores soporta el uso de rotación en el texto mediante reglas CSS3, aunque para Internet Explorer será necesario el uso de filtros DXMImage Transform; lo que contemplaremos en nuestro ejemplo, para que la compatibilidad no será un problema.

Elegiremos una dirección web a pintar en pantalla, por ejemplo: cdp.foc.es y el .es de la parte de la dirección web que rotaremos.

Para los navegadores Chrome, Safari y Mozilla que usan webkit usaremos la propiedad “transform” para rotar el texto.

Para Opera la propiedad –o-transform, soportada a partir de la versión 10.50.

Para que este efecto pueda funcionar, además de la propiedad “transform”  tenemos que establecer el valor de “block” o “inline.block” a la propiedad “display” del elemento que contiene el texto que vamos rotar.

Para Internet Explorer, como suele ocurrir es un poco más complejo, pero se consigue aplicando la propiedad “filter” con un valor llamado “BasicImage” para rotar cualquier elemento que se encuentre en el layout.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

El parámetro “rotation” puede tener valores desde el 0 al 3. Donde 0 indica que rotará 0 grados, 1 indica que rotará 90 grados, 2 indica que rotará 180 grados y 3 indica que rotará 270 grados.

Para hacer este ejemplo partimos de una HTML como el siguiente:

Con este código y sus correspondientes reglas de estilos veremos en pantalla lo siguiente:

Las reglas de estilos son las siguientes y son válidas para cualquier navegador:

El código usado para este ejemplo, puedes descargo aquí para probarlo e incluso mejorarlo.

The post Hazte un experto en programación web con nosotros y podrás desarrollar efectos web como el siguiente: ”Rotar un trozo del texto solo aplicando reglas CSS.” first appeared on Instituto FOC - FP Informática Online.