No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

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

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.

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.

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.

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

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?

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.

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

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

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

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

Me encanta como van las clases 50% teor铆a y 50% pr谩ctica 鉁

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

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>


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

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

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

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