Ejemplo en Acción
3sellers
En uno de los últimos proyectos en los que he estado trabajando, me encontré con la necesidad de colocar enlaces de forma vertical, o sea, rotar palabras 90º.
La manera más socorrida siempre es utilizar una imagen con el texto incrustado, pero en este caso no me servía. La solución que utilicé fué la siguiente solución.
<div id="ejemplo">
<span class="vertical">3sellers</span>
</div>Código CSS
De momento solo funciona para Webkit y Firefox y cada navegador necesita su prefijo
.vertical{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
color:#FF0000;
font-size:1.6em !important;
font-weight:bold;
left:0;
position:absolute;
top:40px;
}
Para IE
Internet explporer tiene su propio filtro.
<!--[if IE]>
<style type="text/css">
.vertical {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
top:0px;
left: 0px;
}
</style>
<![endif]-->La propiedad de rotar del filtro BasicImage acepta uno de los siguientes valores: 0, 1, 2, or 3 que rotaran el elemento 0, 90, 180 or 270 grados respectivamente.
