Transform rotate, scale, skew y matrix

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

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

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

Me imagine asi scale

Paolo Joaquin Pinto Perez

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.

Isaac Hernandez Resendiz

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

Joseph Perales Retamozo

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

Andrew Alfaro Carrillo

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

Laura Altamiranda

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

Código

Irving Juárez

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

Juan Pablo Jimenez

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.

Jimer Samuel Espinoza

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>

Fabian Flores

Notas de la clase

Diego Reyes

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

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

Luis Antonio Martínez Cárcamo

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);
}

Jesús Velázquez Jiménez

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.

Raúl Adolfo Sánchez Rodríguez

hace 8 meses

![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdjc3cThhYzlwcms3bzQ4b212OGdubW9najd1eXk5OTB3OXRxcmY2YyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/1HImZiETlEhCc2snPM/giphy.gif) ![](https://static.platzi.com/media/user_upload/E4_GIF-propiedad%20transform%20y%20funci%C3%B3n%20SCALE%28%20%29-9cbe30b1-2a48-4efe-8547-50198660e9eb.jpg)

Yohana Alexandra Triviño Vasquez

hace 10 meses

Hice estas demostraciones antes de llegar esta clase para ver como funcionaba cada propiedad. <https://codepen.io/alexa-trivi-o-vasquez/pen/wvOegXd>

Raymondi Alejandro Ramos Vásquez

hace un año

Aquí dejo una página donde se muestran varías animaciones con css

cattocss

Rubén Vega

hace un año

Buenas chicos, para practicar este ejemplo se me ocurrió esta idea. Los malos hábitos te hacen mas pequeño. Al hacer hover en los “buenos hábitos”, el div crece.

Ana Rotela Cabrera

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

Carlos Mazzaroli

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

Leandro Cataño Cardeño

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

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

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

ronal mora

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

Les comparto los ejercicios realizados en mi CdePen Aca

ESTEBAN SALAZAR ZAPATA

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