Rota texto usando sólo CSS

This post was published 10 years ago. It may be exremely outdated.

Vía Anieto2k descubro un método muy sencillo para rotar texto usando CSS. Básicamente debemos usar las propiedades “-webkit-transform“, “-moz-transform“, “filter: progid:DXImageTransform.Microsoft.BasicImage()” para Webkit (y Safari), Firefox 3.5 (o posterior) e Internet Explorer, respectivamente.

Lamentablemente no son propiedades que forman parte del estándar de CSS 2, así que éste método sólo funcionará en navegadores que usen Webkit (como Safari o Google Chrome), Firefox 3.5 e Internet Explorer.

Finalmente el código que usaríamos sería el siguiente:

<br />
&amp;lt;div class=&amp;quot;example-date&amp;quot;&amp;gt;<br />
&amp;lt;span class=&amp;quot;day&amp;quot;&amp;gt;31&amp;lt;/span&amp;gt;<br />
&amp;lt;span class=&amp;quot;month&amp;quot;&amp;gt;July&amp;lt;/span&amp;gt;<br />
&amp;lt;span class=&amp;quot;year&amp;quot;&amp;gt;2009&amp;lt;/span&amp;gt;<br />
&amp;lt;/div&amp;gt;<br />
.year {
/* WebKit, Safari */
-webkit-transform: rotate(-90deg);
/* Firefox 3.5+*/
-moz-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Obteniendo este resultado:

Rotar textos

Leave a Reply