CSS Shapes Transiciones

Hola! Hoy les voy a enseñar como hacer que las figuras cambien de forma así: (pongan el mouse encima de la figura)

Para ello necesitan tener una figura, en este caso un cuadrado así:

Y eso se logra con este texto:
<style>
.cuadrado {
   height: 30px;
   width: 30px;
   border: solid 1px grey;
}
</style>
<div class="cuadrado"></div>

Ahora, necesitan una figura a la que se transforme. Yo quiero que se transforme a un rectángulo así:

Pero, si yo quiero que el cuadrado se transforme en rectangulo, solamente le tengo que decir que el ancho se agrande (ancho = width).

<style>
.cuadrado:hover {
   width: 60px;
}
</style>

¿Por qué dice "cuadrado:hover"?
"Hover" significa "cuando-pones-el-mouse-encima"
Y le dije que cambie el ancho a 60 píxeles.
Queda así:

Pero... ¿por que es tan "duro"? Por que falta decirle que se agrande de a poco, y no de golpe! Eso se hace agregando esto:

-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;

Al texto!!! Nos queda:


<style>
.cuadrado {
   height: 30px;
   width: 30px;
   border: solid 1px grey;

-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;

}

.cuadrado:hover {
   width: 60px;
}

</style>
<div class="cuadrado"></div>

Y el resultado:

Ahora solo hay que seguir probando!!!