Rota texto usando sólo CSS

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:

<div class="example-date"> <span class="day">31</span> <span class="month">July</span> <span class="year">2009</span> </div>
Code language: HTML, XML (xml)
.year { /* WebKit, Safari */ -webkit-transform: rotate(-90deg); /* Firefox 3.5+*/ -moz-transform: rotate(-90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
Code language: CSS (css)

Obteniendo este resultado:

Rotar textos

Leave a Reply

Your email address will not be published.

Required fields are marked *

Your avatar