Emoticones, textos y rotación

Todo puede ser rotado, así que a varseb.com se les ocurrió usar esta característica del CSS3 para crear emoticones sólo con textos y si bien dicen que es algo que no pude usarse en Internet Explorer, en realidad, eso no es así y funcionará en cualquier navegador ya que todos disponen de una propiedad para rotar textos (:

Necesitamos crear una clase genérica para contenerlos con cualquier definición que se nos ocurra:

span.smile {
color: Cyan;
display: inline-block;
font-family: Tahoma;
font-size: 20px;
padding: 0 5px;
}

y dos más, con una podemos rotar 90° hacia la izquierda y con otra, hacia la derecha:

span.smile.left {
-webkit-transform: rotate(-90deg); /* Chrome y Safari */
-moz-transform: rotate(-90deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
-o-transform: rotate(-90deg); /* Opera */
}

span.smile.right {
-webkit-transform: rotate(90deg); /* Chrome y Safari */
-moz-transform: rotate(90deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* Internet Explorer */
-o-transform: rotate(90deg); /* Opera */
}

Y ahora, la podemos usar en cualquier parte:

<span class="smile right">:-)</span>

:-) :-D :-X :-( :-O :-$ :-|