Animaciones y transformaciones 2D y 3D con CSS

Escrito por el 12/04/2020.
planeta-codigo web
Enlace permanente Comentarios

HTML

En la antigüedad para añadir algo de dinamismo a las páginas había que hacerlo mediante código JavaScript, por ejemplo, para hacer que una imagen cambiase por otra cuando el ratón pasaba por encima. Con las nuevas versiones de CSS esto se realiza con selectores de CSS en la hoja de estilos. Ahora es posible hacer muchas cosas sin necesidad de utilizar código JavaScript, dos de ellas son las transformaciones 2D, 3D y animaciones. No solo es más fácil crear las animaciones con CSS sin requerir crear código que es más difícil de modificar sino que también ofrece mejor rendimiento.

Animaciones

Por una parte se define las propiedades CSS que cambian en la animación y por otro de definen las propiedades de la animación y a que elementos de la página se aplica.

Dos ejemplos de animación son:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


@keyframes animation1 {
    from { background-color: red; }
    to { background-color: yellow; }
 }
 
 @keyframes animation2 {
    0% { background-color: red; }
    25% { background-color: yellow; }
    50% { background-color: blue; }
    100% { background-color: green; }
 }

keyframes.css

Las propiedades principales de la animación al aplicarlas a un elemento de la página son:

animation-name: animation1;, aplica la animación indicada definida con @keyframes.
animation-duration: 5s;, determina la duración de la animación.
animation-timing-function: linear;, aplica una función para interpolar los valores que se asignara en cada propiedad y fotograma. Los valores posibles son: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit.
animation-delay: 2s;, retraso en el inicio de la animación.
animation-iteration-count: infinite;, número de veces a repetir la animación. Los valores posibles son: number|infinite|initial|inherit.
animation-direction: alternate;, dirección a aplicar la animación. Los valores posibles son: normal|reverse|alternate|alternate-reverse|initial|inherit;.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


div.box-animation {
   width: 100px;
   height: 100px;
   background-color: red;
   position: relative;

   animation-name: animation1;
   animation-duration: 5s;
   animation-timing-function: linear;
   animation-delay: 2s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
}

animation.css

Con estas propiedades de animación, la definición de las propiedades que cambian en una animación y los selectores CSS es posible realizar animaciones muy curiosas con la ventaja de que al realizarlas no con JavaScript el rendimiento es mucho mejor, las transiciones muy suaves y sencillo de crear y modificar.

Transformaciones

Las transformaciones 2D permite aplicar escalado, rotación, traslación, inclinación o skew con la propiedad de transform. La lista de funciones 2D es:

rotate(angle)
scale(x,y)
scaleX(n)
scaleY(n)
translate(x,y)
translateX(n)
translateY(n)
skew(x-angle,y-angle)
skewX(angle)
skewY(angle)

O aplicando varias de ellas con una matriz:

matrix(n,n,n,n,n,n)

1
2
3
4


div {
    backgroud-color: red;
    transform: rotate(20deg) skewY(25deg);
 }

transform.css

Las funciones de transformación 3D aplican efectos 3D a los elementos.

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
translate3d(x,y,z)
translateX(x)
translateY(y)
translateZ(z)
scale3d(x,y,z)
scaleX(x)
scaleY(y)
scaleZ(z)
rotate3d(x,y,z,angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)
perspective(n)

Estos son tres ejemplos de efectos aplicando transformaciones y animaciones, se pueden combinar ambos a la vez. Un ejemplo aplica una operación de transformación a una imagen, otro al ubicar el ratón encima empieza a rotar y otro que repite una transición de color y translación de forma infinita.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48


@keyframes animation {
    0%   {background-color: red; left: 0px; top: 0px;}
    25%  {background-color: yellow; left: 200px; top: 0px;}
    50%  {background-color: blue; left: 200px; top: 200px;}
    75%  {background-color: green; left: 0px; top: 200px;}
    100% {background-color: red; left: 0px; top: 0px;}
}

@keyframes transform {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }
}

div.box-animation {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;

    animation-name: animation;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

img.image {
    height: 250px;
    background-color: green;
}

img.image-transform {
    transform: skewY(25deg);
}

div.box-transform {
    width: 100px;
    height: 100px;
    background-color: black;
}

div.box-transform:hover {
    animation-name: transform;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

example.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


<div style="display: flex; justify-content: space-evenly; margin-top: 150px; height: 300px;">
    <div>
        <div class="media">
            <figure>
                <p><img src="images/alemania-destructor-z-23.jpg" alt="Imagen sin transformación" title="Imagen sin transformación" class="image lozad" data-loaded="true" width="450" height="253"></p>
                <figcaption>Imagen sin transformación</figcaption>
            </figure>
        </div>
    </div>
    <div>
        <div class="media">
            <figure>
                <p><img src="images/alemania-destructor-z-23.jpg" alt="Imagen sin transformación" title="Imagen sin transformación" class="image image-transform lozad" data-loaded="true" width="450" height="253"></p>
                <figcaption>Imagen con transformación 2D</figcaption>
            </figure>
        </div>
    </div>
</div>

<div style="display: flex; justify-content: space-evenly; margin-top: 150px; height: 300px;">
    <div class="box-transform"></div>
    <div class="box-animation"></div>
</div>

example.html

    ![](url="image:alemania-destructor-z-23.webp,options=,optionsthumb=450x300,gallery=false,class=image" "Imagen sin transformación")
    
    
    <figcaption>Imagen sin transformación</figcaption>
    </figure>
    </div>
</div>
<div>
    <div class="media">
    <figure>
    
    
    
    
    ![](url="image:alemania-destructor-z-23.webp,options=,optionsthumb=450x300,gallery=false,class=image.image-transform" "Imagen sin transformación")
    
    
    <figcaption>Imagen con transformación 2D</figcaption>
    </figure>
    </div>
</div>

Referencia: