Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Transform rotate, scale, skew y matrix

6/20
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.

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 😄.

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

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>

Me imagine asi scale

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.

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

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

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.

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?

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.

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.

Notas de la clase

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

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

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

Les comparto los ejercicios realizados en mi CdePen Aca

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() )

❤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

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

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