CSS3 Transición y Transformación - Cuadrado a un Circulo

El nombre hojas de estilo en cascada viene del inglés Cascading Style Sheets, del que toma sus siglas. CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "<style>".

CSS3

En diferencia a CSS2, que fue una gran especificación que definía varias funcionalidades, CSS3 está dividida en varios documentos separados, llamados "módulos".
Cada módulo añade nuevas funcionalidades a las definidas en CSS2, de manera que se preservan las anteriores para mantener la compatibilidad.

Ejemplo:

Archivo CSS

#efecto

{

background:rgba(195,202,203,0.3);

width: 150px;

height: 150px;

margin: 10% auto;

transform: rotate(360deg); /* Realiza la rotación del div en 360° en direccion a las manecillas del reloj */

-webkit-transform: rotate(360deg);

transition: all 2s ease-in-out; /* Transition se encarga de dar el timpo en que sucede la transformacíon, en    el cual es de 2 segundos*/

-webkit-transition: all 2s ease-in-out;

}

#efecto:hover  /* hover es una subclase la cual detecta cuando pasamos el puntero sobre un determinado objeto y realizara los cambios que estan a continuación  */

{

background:#f33;

width:200px;

height:200px;

border-radius:50%;

-webkit-border-radius:50%; /* Formamos el circulo */

transform: rotate(-360deg); /* la figura rotara 360 grados en direccion contraria a las manecillas del reloj */

-webkit-transform: rotate(-360deg);

}

div

{

overflow: auto;

}

body

{

background: black;

} 

El archivo con el ejemplo completo se puede descargar aquí: Descargar