Transform rotate, scale, skew y matrix

Curso de Transformaciones y Transiciones en CSS

Importancia de las animaciones web

5 razones para usar animaciones en la web

Conceptos iniciales

Propiedades para crear animaciones con CSS y propiedades animables

Pseudo-clases y pseudo-elementos en las animaciones

Timing functions, planos y ejes

Transformaciones en 2D y 3D

Transform translate

Transform rotate, scale, skew y matrix

Transform origin

Transform style y perspective

Backface visibility

Parallax con transformaciones

Efecto parallax: estructura HTML

Efecto parallax: estilos CSS

Transiciones

Transition property y duration

Transition timing function y delay

Tips de UX

Movimiento impulsado por la acción

Tiempos de espera

Problemas de parpadeo

Rendimiento y accesibilidad

Propiedades recomendadas y no recomendadas para animar

Aceleración de hardware y la propiedad will-change

Preferencias de movimiento reducido

Libros recomendados y próximos pasos

Continúa en el Curso de Animaciones con CSS

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Crear cuenta

Si ya tienes una cuenta,

Iniciar sesión

Recursos

Aportes 21

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

RetaxMaster

Profe Platzi

hace un año

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

Rotate: Te ayuda a girar un elemento, puedes rotarlo en los ejes X, Y o Z.
Scale: Te ayuda a cambiar el tamañode un elemento, básicamente puedes agrandarlo o achicarlo.
Skew: Te ayuda a deformar un elemento tanto en X como en Y, esta propiedad es muy útil cando queires dar un efecto 3D.
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

hace un año

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 Rojas

hace un año

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

hace un año

Me imagine asi scale

Paolo Joaquin Pinto Perez

hace un año

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

hace un año

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

Isaac Hernandez Resendiz

hace 10 meses

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

Juan Pablo Jimenez

hace 10 meses

6.-Transform rotate, scale, skew y matrix

Rotate: Te ayuda a girar un elemento, puedes rotarlo en los ejes X, Y o Z.
Scale: Te ayuda a cambiar el tamañode un elemento, básicamente puedes agrandarlo o achicarlo.
Skew: Te ayuda a deformar un elemento tanto en X como en Y, esta propiedad es muy útil cando queires dar un efecto 3D.
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.

Laura Altamiranda

hace 8 meses

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?

Gonzalo Ceron Denetro

hace 10 meses

Código

JOSEPH LUIS PERALES RETAMOZO

hace 3 meses

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.

Captura de pantalla 2022-02-10 220025.jpg

Jesús Velázquez Jiménez

hace 8 meses

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

hace un año

Notas de la clase

Diego Reyes

hace 3 meses

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

Fernando Yutiz

hace 7 meses

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

ronal mora

hace 9 meses

<!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

hace 9 meses

Les comparto los ejercicios realizados en mi CdePen Aca

Esteban Salazar

hace 10 meses

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

hace un año

❤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

Carlos Mazzaroli

hace un año

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

Irving Juárez

hace un año

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