Las bondades del CSS3: girar, rotar div y texto con transform

   Sigo con la página Las Edades de la Tierra y quiero que la veáis para ilustrar el ejemplo. En parte derecha de la pantalla podéis ver una pestaña que está en vertical con el texto "Notas" dentro. Al pincharla se despliega una ventana que está oculta. Bien, en este post voy a explicar cómo girar ese elemento para que nos quede vertical (en el próximo post explicaré como desplegar y ocultar la ventana). La instrucción (en CSS3) es la siguiente: transform: rotate(-90deg);. Con esta sencilla linea conseguimos el efecto de girar, rotar tanto el div como el texto que contiene y ponerlo en vertical. Bueno, en realidad no sería una sola linea, de momento para que funcione en la mayoría de los navegadores tenemos que que poner los prefijos -ms-(para el IE9) y -webkit-(para Chrome y Safari). El código CSS nos quedaría algo como:

.vertical{
    background-color: black;
    border-radius: 10px 10px 0 0;
    border-style: solid solid none solid;
    border-width: 2px;
    clear: both;
    color: #00FF99;
    cursor: pointer;
    float: left;
    font-size: 1em;
    padding: 2px;
    position: absolute;
    width: 110px;
    top: 45%;
    right: 84%;
    text-align: center;
    -ms-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    transform: rotate(-90deg);
    z-index: 150;
  }

   Debéis tener en cuenta que, para dar el formato al contenedor, tenéis que aplicar las reglas pensando que este está en horizontal no en vertical. La reglas este CSS están escritas teniendo en cuenta que ".vertical" está dentro de otro div.