adsense

XRL Tech Corner

Tutoriales online de programación, CMS, Raspberry y artículos sobre tecnología.

Animaciones css con transformaciones

Transformaciones

En este segundo artículo vamos a hablar de las traslaciones, rotaciones, escalados, y sesgados en el plano de dos dimensiones con CSS.

Contenidos

Recomendado Utiliza el editor html css online para probar los ejemplos

 También tienes disponible el código fuente del tutorial en GitHub

Las rotaciones



La sintaxis es sencilla "transform: rotate (grados)".
Los grados van de 0deg a 360deg para dar una vuelta completa. O también se puede especificar "1turn", que es una vuelta completa también. 
Aunque podemos especificar más de 360deg para girar más grados. Incluso podemos girar hacia el otro sentido poniendo el signo "-" delante de los grados. 
Es decir, giramos en el sentido de las agujas del reloj con 15deg, y en el sentido inverso a las agujas del reloj con -15deg.

Pero para poder ver una rotación en un div, tenemos que incluir una transición de transformaciones en la definición de la clase. Esto es con "transition: transform 3s;"


Las traslaciones y los escalados



La sintaxis es "transform: scale(factor);"
Donde el factor es un número que indica el porcentaje, por ejemplo 0.5 sería el 50%, y 2 sería el 200%.

También se puede escalar independientemente en la dirección x, o en la dirección y.
Esto se realiza con "transform: scale (factor_x, factor_y);"

O de modo separado se puede realizar con:
"transform: scaleX(factor);"
"transform: scaleY(factor);"

Hay que destacar que aunque escalemos un objeto, su modelo de caja que lo contiene no varía, y eso nos puede dar la sensación que se mueve al escalarlo, porque se hace más pequeño o más grande. 
Depende de donde se ubique el origen de la transformación. Bien puede ser en el centro o en una esquina.
Esto se puede controlar con "transform-origin: center left (o en píxeles)".

Para mover un elemento de un sitio a otro ciertos píxeles la sintaxis es:
"transform: translateX(5px);" para moverlo en la dirección x
"transform: translateY(5px);" para moverlo en la dirección y

Si no especificamos X o Y, lo moverá en ambas direcciones.
"transform: translate(5px);"

Se pueden anidar varias transformaciones una detrás de la otra y no hacen falta comas.
Por ejemplo: "transform: rotate(100deg) translateX(4px);"

Los sesgados



Esta transformación no creo que se utilice mucho en las páginas web habituales. 
Consiste en deformar el objeto un cierto ángulo en la dirección X o en la Y. 
Para realizarlo se utiliza la sintaxis: "transform: skew(angX,angY);"
O para hacerlo independiente para cada dirección:
"transform: skewX(ang);"
"transform: skewY(ang);"

Para poder ver en práctica estos conceptos hemos puesto dos ejemplos css. 

El primero es una imagen de una rueda de coche. Al mover el ratón por encima de la imagen, se mueve rodando hacia la derecha. 
También hemos añadido una pequeña deformación con la transformación de sesgado.

El segundo es una serie de tres imágenes de un álbum. Al mover el ratón por encima de la foto, se rota, se escala y se traslada unos pocos píxeles.

El código css es el siguiente:

<style>
.lab {
   background-color: #FFFFFF;
     border: 1px solid #000000;
    padding-top: 0px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    max-width: 500px;
    height: 540px;
    
}

.lab.h4 {
   color: #000000;
}
.rueda {
 transition: transform 1s linear;
 max-width:128px;
 background-color: #FFFFFF;
 padding: 0px;
 margin: 0px;

}

.rueda:hover {
 background-color: #FFFFFF;
 transform: translate(300px,0px) rotate(360deg) skew(10deg,10deg);
}

.fotoalbum {
   padding-top:20px;
}

.foto{
   transition: transform 0.7s linear;
   float: left;
   padding: 15px;
}

.foto:hover {
   transform: scale(1.3) rotate(10deg) translateY(15px);
}

style>

 

 />
 class="lab">

 

Pruébalo /> class="rueda"> height="128" src="https://4.bp.blogspot.com/-fG8NbvUiVCI/V_35oC0W-RI/AAAAAAAAEKk/K3VWeTOYETowyFyd3rwskp3VDzuxrdtewCLcB/s1600/ruedita.png" width="128" /> class="fotoalbum"> class="foto"> height="113" src="https://3.bp.blogspot.com/-_FaDD34PaJs/V_TfC-9IvnI/AAAAAAAAEJk/yqmSz2LE6O8ElGDblJhjbcHL7Zk3KdcHwCEw/s200/mandelbulb7.png" width="200" /> class="foto"> height="113" src="https://1.bp.blogspot.com/-OdlkWwIeUDg/V_TfB-Iow3I/AAAAAAAAEJM/pxJyfvRAKvwepyTacBnHgsx0LfKot7AmACEw/s200/mandelbulb2.png" /> class="foto"> height="113" src="https://4.bp.blogspot.com/-p4CC55b87cE/V_TfBygN0XI/AAAAAAAAEJQ/yQpUKVZftRw1IWPR6-0-vcS8mcjm4IzOgCEw/s200/mandelbulb3.png" />

 

Pruébalo


Como hacer animaciones con CSS utilizando transformaciones
imagen abstracta fractal generada con mandelbulber
imagen abstracta cubo esfera fractal generada con mandelbulber
imagen abstracta fractal balcon nave generada con mandelbulber
Valora este artículo del blog:
Wordpress o Blogger
Animaciones css con keyframes

Artículos relacionados

 

Comentarios

No hay comentarios por el momento. Se el primero en enviar un comentario.
¿Ya està registrado? Ingresa Aquí
Invitado
Viernes, 20 Octubre 2017
Si desea registrarse, por favor rellene los campos de nombre de usuario y nombre.

Imagen Captcha