Curso de Transformaciones y Transiciones en CSS
Curso de Transformaciones y Transiciones en CSS

Importancia de las animaciones web

1

5 razones para usar animaciones en la web

Conceptos iniciales

2

Propiedades para crear animaciones con CSS y propiedades animables

3

Pseudo-clases y pseudo-elementos en las animaciones

4

Timing functions, planos y ejes

Transformaciones en 2D y 3D

5

Transform translate

6

Transform rotate, scale, skew y matrix

7

Transform origin

8

Transform style y perspective

9

Backface visibility

Parallax con transformaciones

10

Efecto parallax: estructura HTML

11

Efecto parallax: estilos CSS

Transiciones

12

Transition property y duration

13

Transition timing function y delay

Tips de UX

14

Movimiento impulsado por la acción

15

Tiempos de espera

16

Problemas de parpadeo

Rendimiento y accesibilidad

17

Propiedades recomendadas y no recomendadas para animar

18

Aceleración de hardware y la propiedad will-change

19

Preferencias de movimiento reducido

Libros recomendados y próximos pasos

20

Continúa en el Curso de Animaciones con CSS

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Iniciar sesión
Aprende todo un fin de semana sin pagar una suscripción 🔥

Aprende todo un fin de semana sin pagar una suscripción 🔥

Regístrate

Comienza en:

5D
18H
56M
30S
Curso de Transformaciones y Transiciones en CSS

Curso de Transformaciones y Transiciones en CSS

Estefany Aguilar

Estefany Aguilar

Transform rotate, scale, skew y matrix

6/20
Recursos

Además de translate, existen otras funciones que permiten transformar el elemento HTML para iniciar una animación.

Funciones de transformación

Rotate para transformaciones

Rotate es una función de la propiedad transform que te permite rotar un elemento HTML a través de los ejes del navegador. El valor que recibe es un ángulo, por ejemplo, “45deg” (45 grados) o “2rad” (2 radianes). Los ángulos positivos están en sentido horario, y los negativos en sentido antihorario.

selector {
    transform: rotate(45deg);
}
Representación de la función rotate

Dependiendo del eje en el que rotes el elemento, existe una función.

Tipo Valor con los argumentos que recibe
Eje X y Y rotate(angle)
Eje X rotateX(angle)
Eje Y rotateY(angle)
Eje Z rotateZ(angle)
Múltiple rotate3d(x,y,z,angle)

Scale para transformaciones

Scale es una función de la propiedad transform que te permite escalar un elemento HTML a través de sus ejes. El valor que recibe es un número multiplicador al elemento original.

Si el elemento es igual a 1 entonces sigue como el original; mayor a 1 aumenta de tamaño; y, menor a 1 disminuye de tamaño.

selector {
    transform: scale(0.8);
}
Representación de la función scale

Dependiendo del eje en el que escales el elemento, existe una función.

Tipo Valor con los argumentos que recibe
Eje X y Y scale(x)
Eje X scaleX(x)
Eje Y scaleY(y)
Eje Z scaleZ(z)
Múltiple scale3d(x,y,z)

Skew para transformaciones

Skew es una función de la propiedad transform que te permite torcer un elemento HTML a través de sus ejes en dos dimensiones. El valor que recibe es un ángulo para cada eje en el que el elemento se distorsionará.

selector {
    transform: skew(45deg, 45deg);
}
Representación de la función skew

Dependiendo del eje en el que tuerzas el elemento, existe una función.

Tipo Valor con los argumentos que recibe
Eje X y Y skew(angleX, angleY)
Eje X skewX(angle)
Eje Y skewY(angle)

Matrix para transformaciones

Matrix es una función de la propiedad transform que te permite realizar varios efectos en uno solo.

Orden en el código para transformaciones

Solamente puede existir una sola propiedad transform en el código de CSS, por lo que si escribimos otra regla CSS con otra transformación, esta se sobreescribirá y solo ejecutará la última. Por ende, utiliza varias funciones en la misma propiedad transform para realizar varias transformaciones.

/*Mal (solo rotará el elemento)*/

selector {
    transform: translate(100px,  100px);
    transform: rotate(45deg);
 }

/*Bien (realizará ambas transformaciones)*/

selector {
    transform: translate(100px, 100px) rotate(45deg);
}

Contribución con aportes de: Andrés Guano.

Aportes 27

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

RetaxMaster

RetaxMaster

Profe Platzi

hace 2 años

Les dejo este gif que les ayuda a visualizar mejor estos conceptos :3

  1. Rotate: Te ayuda a girar un elemento, puedes rotarlo en los ejes X, Y o Z.
  2. Scale: Te ayuda a cambiar el tamañode un elemento, básicamente puedes agrandarlo o achicarlo.
  3. Skew: Te ayuda a deformar un elemento tanto en X como en Y, esta propiedad es muy útil cando queires dar un efecto 3D.
  4. Matrix: Esta es una propiedad un poquito máscompleja. Te permite escalar, deformar y mover tu elemento a través de diferentes propiedades, recomiendo darle un ojo a la documentación de esta propiedad para entenderla mejor 😄.
Camilo Torres camayo

Camilo Torres camayo

hace 2 años

Hey Tu, siii tu
Navega por esta pagina Link es Open Source
para que aprendas nuevas formas de implementar lo aprendido

Slicebox: un nuevo control deslizante de imágenes en 3D con un elegante respaldo

Chécalo por tu mismo Link

Les dejo el GitHub de los repositorio de esta pagina Link

Sebastian Heredia

Sebastian Heredia

hace 2 años

Un pequeño ejemplo 🥺

.
Abajo pueden encontrar el codigo 😃
.


.

CODIGO

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cabeza{
            background-color: #3c8500;
            background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-left: auto;
            margin-right: auto;
        }

        .piertaLeft{
            width: 20px;
            height: 100px;
            background-color: antiquewhite;
            position: fixed;
            left: 725px;
            top: 200px;
            z-index: 5;
        }

        .piertaRight{
            width: 20px;
            height: 100px;
            background-color: antiquewhite;
            position: fixed;
            left: 780px;
            top: 200px;
            z-index: 5;
        }

        .estomago{
            background-color: rgb(0, 112, 250);
            width: 150px;
            height: 100px;
            margin-left: auto;
            margin-right: auto;
        }

        .ojoLeft{
            width: 20px;
            height: 20px;
            background-color: #004e7b;
            border-radius: 50%;
            position: fixed;
            top: 30px;
            left: 740px;
        }
        .ojoRight{
            width: 20px;
            height: 20px;
            background-color: #004e7b;
            border-radius: 50%;
            position: fixed;
            top: 30px;
            left: 775px;
        }

        .persona{
            width: 200px;
            margin-left: auto;
            margin-right: auto;
        }

        .boca{
            width: 45px;
            height: 10px;
            background-color: #004e7b;
            position: fixed;
            top: 80px;
            left: 745px;
        }

        .bocaLeft{
            width: 20px;
            height: 10px;
            background-color: #004e7b;
            position: fixed;
            top: 83px;
            left: 730px;
            transform: rotate(-30deg);
        }

        .bocaRight{
            width: 20px;
            height: 10px;
            background-color: #004e7b;
            position: fixed;
            top: 83px;
            left: 788px;
            transform: rotate(30deg);
        }

        .brazoRight{
            width: 20px;
            height: 100px;
            background-color: antiquewhite;
            position: fixed;
            left: 825px;
            top: 120px;
            z-index: 5;
        }


    
        .brazoLeft{
            width: 20px;
            height: 100px;
            background-color: antiquewhite;
            position: fixed;
            left: 685px;
            top: 120px;
            z-index: 5;
        }

        .persona:hover .brazoLeft{
            transform: rotate(-20deg);
        }


        .persona:hover .brazoRight{
            transform: rotate(-20deg);
        }

        .persona:hover .bocaRight{
            transform: rotate(-30deg);
            top:77px ;
        }

        .persona:hover .bocaLeft{
            transform: rotate(30deg);
            top:77px ;
            left: 728px;
        }
    </style>
</head>
<body>

    <div class="persona">
        <div class="brazoLeft">

        </div>
        <div class="brazoRight">

        </div>
        <div class="cabeza">

        </div>
        <div class="piertaLeft"> 

        </div>
        <div class="piertaRight">

        </div>
        <div class="estomago">

        </div>
        <div class="ojoLeft">

        </div>
        <div class="ojoRight">
            
        </div>
        <div class="boca">

        </div>
        <div class="bocaLeft">

        </div>
        <div class="bocaRight">

        </div>
    </div>
    
</body>
</html>
Gabriel Hernández Valdez

Gabriel Hernández Valdez

hace 2 años

Me imagine asi scale

Paolo Joaquin Pinto Perez

Paolo Joaquin Pinto Perez

hace 2 años

Transform rotate, scale, skew y matrix


Escalado (scale()): Estas hace como una transformación en la que aumentan o reducen el tamaño de un elemento, y se basan en el parámetro indicado, que es solo un factor de escala.
Rotaciones(rotate): Se podría decir que las funciones de rotación simplemente giran el elemento el número de grados indicado.
Ejemplo:
Con transform: rotate(5deg) realizamos una rotación de 5 grados del elemento sobre si mismo.
Deformaciones(skew): Establecen un ángulo para torcer, tumbar o inclinar un elemento en 2D.

Andrew Alfaro Carrillo

Andrew Alfaro Carrillo

hace 2 años

El vídeo tiene algún efecto o parece que esta mal renderizado. Se ven algunas lineas y manchas en el vídeo.

Joseph Perales Retamozo

Joseph Perales Retamozo

hace un año

Hay un pequeño error aquí respecto al valor por defecto de rotate().
El eje que rota por defecto es el eje Z, pero como el eje Z está a la dirección de nuestra vista nos da esa alusión.

Isaac Hernandez Resendiz

Isaac Hernandez Resendiz

hace 2 años

Cree un repositorio para hacer un mini resumen de las clases o implementas ahí algunos de los ejemplos vistos en clase. Lo dejo si quieren darse una vuelta: aqui

Gonzalo Ceron Denetro

Gonzalo Ceron Denetro

hace 2 años
Laura Altamiranda

Laura Altamiranda

hace 2 años

Un valor Y positivo ¿hacia dónde va? . Para mi es hacia arriba, pero al hacer el examen me conto la respuesta como error y me trajo hasta acá, donde no habla sobre ejes ni los movimientos de estos (?) en fin. He consultado y siempre me dicen lo mismo: Va hacia Arriba. ALguione me explica si estoy equivocada?

Juan Pablo Jimenez

Juan Pablo Jimenez

hace 2 años

6.-Transform rotate, scale, skew y matrix

  1. Rotate: Te ayuda a girar un elemento, puedes rotarlo en los ejes X, Y o Z.
  2. Scale: Te ayuda a cambiar el tamañode un elemento, básicamente puedes agrandarlo o achicarlo.
  3. Skew: Te ayuda a deformar un elemento tanto en X como en Y, esta propiedad es muy útil cando queires dar un efecto 3D.
  4. Matrix: Esta es una propiedad un poquito máscompleja. Te permite escalar, deformar y mover tu elemento a través de diferentes propiedades, recomiendo darle un ojo a la documentación de esta propiedad para entenderla mejor 😄.

Transform puede recibir varios valores, como rotación, traslación, etc. No se puede colocar una propiedad transform debajo de otra ya que se sobrescriben, lo que se hace es que se coloca un valor alado del otro.

Irving Juárez

Irving Juárez

hace 2 años

Esta cool, pero se ve horrible sin transiciones. Ya quiero llegar a esa parte

Diego Reyes

Diego Reyes

hace un año

Solo vengo a decir que la reina roja es otro personaje de otro cuento. En alicia esa reina se llama reina de corazones jskjsksjs.

Jesús Velázquez Jiménez

Jesús Velázquez Jiménez

hace 2 años

La función skew() fue presentada en los primeros borradores. Esta ha sido removida pero sigue presente en algunas implementaciones. No debe usarse.

Para lograr el mismo efecto, utilice la función skewX(). Si tu estas usando skew () con un parámetro o matriz (1, tan (ay), tan (ax), 1, 0, 0). Ten en cuenta que tan() no es una función CSS y así que tu mismo tienes que precalcular tus valores.

Fabian Flores

Fabian Flores

hace 2 años

Notas de la clase

Luis Antonio Martínez Cárcamo

Luis Antonio Martínez Cárcamo

hace un mes

Además de translate, hay varias otras propiedades de transformación en CSS:

transform: rotate(angle) permite rotar un elemento en un ángulo específico. El valor angle puede ser especificado en grados, radianes o turnos. Por ejemplo:
css

.element {
   transform: rotate(45deg);
}

transform: scale(x, y) permite escalar un elemento en el plano x-y. Los valores x y y especifican el factor de escala en cada dirección. Por ejemplo:
css

.element {
   transform: scale(2, 0.5);
}

transform: skew(x, y) permite inclinar un elemento en el plano x-y. Los valores x y y especifican el ángulo de inclinación en cada dirección. Por ejemplo:
css

.element {
   transform: skew(30deg, 10deg);
}

transform: matrix(a, b, c, d, e, f) permite combinar varias transformaciones en una sola propiedad. La matriz se compone de 6 valores que representan una matriz 3x3. Por ejemplo:
css

.element {
   transform: matrix(1, 0, 0, 1, 50, -30);
}
Ana Rotela Cabrera

Ana Rotela Cabrera

hace 4 meses

Me encanta como van las clases 50% teoría y 50% práctica ✨

Carlos Mazzaroli

Carlos Mazzaroli

hace 2 años

Les dejo esta variante, quedo graciosa la transición del rotate al poner valores exagerados
https://codepen.io/mazzaroli/pen/BaRyvQv

Jimer Samuel Espinoza

Jimer Samuel Espinoza

hace 6 meses

Les comparto mi codigo de esta clase

Transform rotate

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .circle {
        background-color: #00dbde;
        background-image: linear-gradient(90deg, #00dbde 0%, #fc00ff 100%);
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
      .circle:hover {
        transform: scale(1.5);
      }
    </style>
  </head>
  <body>
    <div class="circle"></div>
  </body>
</html>

skew

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        background: lightpink;
        border-radius: 20%;
        width: 100px;
        height: 100px;
      }
      div:hover {
        transform: skew(20deg);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Scale

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .circle {
        background-color: #00dbde;
        background-image: linear-gradient(90deg, #00dbde 0%, #fc00ff 100%);
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
      .circle:hover {
        transform: scale(1.5);
      }
    </style>
  </head>
  <body>
    <div class="circle"></div>
  </body>
</html>
Leandro Cataño Cardeño

Leandro Cataño Cardeño

hace 6 meses


porfin pude crear mi primer gif 😕
Lo hice con un programa de gravación de linux y un transformador a gif web.
Como mis videos no los leía el coso entonces lo coloque a en notion y luego lo descargé se le cambiaba el formato, por si un día un video les da problema

Rubén Ernesto Aragón Gil

Rubén Ernesto Aragón Gil

hace 9 meses

Les dejo mi aporte con transform + transition:

* {
    margin: 70px;
    padding: 70px;
}

div {
    display: grid;
    place-content: center;
    background: lightsalmon;
    width: 150px;
    height: 100px;
}

div:hover {
  transform: rotate(180deg);  
  transition: .9s;
}

.box {
    display: grid;
    place-content: center;
    background: rgb(122, 255, 200);
    width: 150px;
    height: 100px;
}

.box:hover {
  transform: rotate(180deg);  
  transition: 2s;
}
Mateo Javier Rojas Céspedes

Mateo Javier Rojas Céspedes

hace 9 meses

les dejo esta pagina que les permite jugar con los valores en estas propiedades y además ver los efectos https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Fernando Yutiz

Fernando Yutiz

hace un año

Buenisimo. Pensar que antes todo esto solo se podia hacer con JavaScript

ronal mora

ronal mora

hace 2 años
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cuerpo{
            width: 500px;
            height: auto;
            align-content: center;
            margin: 50px;
        }
        #box01{
            width: 100px;
            height: 100px;
            border-radius: 30px;
            background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
            margin: 10px;
        }
        .circle:hover{
            transform: scale(0.8);
            transition: 0.5s;
        }
        .circle2:hover{
            transform: scale(1.5);
            transition: 0.5s;
        }
        .circle3:hover{
            transform: scale(1.5,0.7);
            transition: 0.5s;
        }
        .circle4:hover{
            transform: scaley(1.5);
            transition: 0.5s;
        }
    </style>
</head>
<body class="cuerpo"><div>
    <p>encoger</p>
    <div class="circle" id="box01"></div>
    <p>escalar</p>
    <div class="circle2" id="box01"></div>
    <p>deformar en dos ejes</p>
    <div class="circle3" id="box01"></div>
    <p>deformar en solo el ejes de la y</p>
    <div class="circle4" id="box01"></div>
</div>
</body>
</html>
Reynaldo Francisco Moreno Briceño

Reynaldo Francisco Moreno Briceño

hace 2 años

Les comparto los ejercicios realizados en mi CdePen Aca

ESTEBAN SALAZAR ZAPATA

ESTEBAN SALAZAR ZAPATA

hace 2 años

Faltó el de matrix que sirve para combinar scale, skew y translate. matrix() recibe 6 valores que son matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

Carlos Mazzaroli

Carlos Mazzaroli

hace 2 años

❤Rotate

Te ayuda a girar un elemento, puedes rotarlo en los ejes X, Y o Z.

  • Código

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 100px;
            background: lightpink;

        }
        div:hover {
            transition: 5000ms;
            transform: rotateY(1800deg) rotateX(1800deg) rotateZ(1800deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

🧡Scale

Te ayuda a cambiar el tamaño dé un elemento, básicamente puedes agrandarlo o achicarlo.

  • Código

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            position: relative;
            width: 100%;
            height: 100vh;
        }
        .circle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #FFFFFF;
            background-image: linear-gradient(180deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);
        }
        .circle:hover {
            transform: translate(-50%,-50%) scale(0.8, 1.2);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="circle"></div>
    </div>
        
</body>
</html>

💛Skew

Te ayuda a deformar un elemento tanto en X como en Y, esta propiedad es muy útil cuando quieres dar un efecto 3D.

  • Código

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: lightpink;
            border-radius: 20%;
        }
        div:hover {
            transform: skew(20deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

💚Matrix

Te permite escalar, deformar y mover tu elemento a través de diferentes propiedades. Documentación

💙Lecturas recomendadas

transform
link