Una vez mas os comento que con los estilos CSS se pueden conseguir diseños y efectos muy buenos. En el caso de hoy, se trata de crear un elemento al que podemos ponerle un fondo de color o una imagen. Le aplicaremos las propiedades 'animation' y 'keyframes' para animarlo, 'border-radius' para redondearlo y 'transform: rotate' para que gire sobre si mismo. El resultado es el que podeis ver aqui abajo, una esfera que gira del derecho y del reves, y que cambia de forma geometrica de circular a cuadrado. Cambiando los parametros podemos hacer que rote mas lentamente y nos puede servir como diseño para nuestro blog o web echandole un poco de imaginacion.
Aqui teneis un ejemplo con simplemente un color de fondo:
Y ahora con una imagen:
Para su realizacion he empleado el siguiente codigo CSS3:
<style>
#figura {
width:275px;
margin:0 auto;
height:275px;
padding:25px;
}
.elemento {
height: 258px; /* anchura de la imagen o fondo */
width: 258px; /* altura de la imagen o fondo */
background: #000000; /* aqui va el color o la imagen de fondo */
margin: 50px;
float: left;
-webkit-animation: spin 2s infinite alternate;
-moz-animation: spin 2s infinite alternate;
-ms-animation: spin 2s infinite alternate;
-o-animation: spin 2s infinite alternate;
animation: spin 2s infinite alternate;
}
@keyframes "spin" {
0% {
border-radius: 0px;
}
100% {
border-radius: 50%;
-webkit-transform: rotate(2000deg);
-moz-transform: rotate(2000deg);
-o-transform: rotate(2000deg);
-ms-transform: rotate(2000deg);
transform: rotate(2000deg);
}
}
@-moz-keyframes spin {
0% {
border-radius: 0px;
}
100% {
border-radius: 50%;
-moz-transform: rotate(2000deg);
transform: rotate(2000deg);
}
}
@-webkit-keyframes "spin" {
0% {
border-radius: 0px;
}
100% {
border-radius: 50%;
-webkit-transform: rotate(2000deg);
transform: rotate(2000deg);
}
}
@-ms-keyframes "spin" {
0% {
border-radius: 0px;
}
100% {
border-radius: 50%;
-ms-transform: rotate(2000deg);
transform: rotate(2000deg);
}
}
@-o-keyframes "spin" {
0% {
border-radius: 0px;
}
100% {
border-radius: 50%;
-o-transform: rotate(2000deg);
transform: rotate(2000deg);
}
}
@keyframes "spin2" {
0% {
border-radius: 50%;
-webkit-transform: rotate(-2000deg);
-moz-transform: rotate(-2000deg);
-o-transform: rotate(-2000deg);
-ms-transform: rotate(-2000deg);
transform: rotate(-2000deg);
}
100% {
border-radius: 0%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
</style>
Luego, para que aparezca donde nosotros queramos, solo hay que poner los divs correspondientes:
<div id="figura"><div class="elemento"></div></div>
