Elementos con animacion, rotacion y transformacion CSS3

1 comentó



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>