Cursos Empresas Blog Live Conf Eventos Precios

0:009:43

Recursos

Resumen

Además de translate, existen otras funciones que permiten transformar el elemento HTML para iniciar una animació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);
}

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)

Ejemplo usando rotate

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

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)

Ejemplo usando scale

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

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)

Ejemplo usando scale

Matrix para transformaciones

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

Documentación de matrix

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.

Transformaciones CSS: Scale, Skew y Rotate en Elementos HTML

Curso de Transformaciones y Transiciones en CSS

Clase 6 / 20

Ver clases

Transformaciones CSS: Scale, Skew y Rotate en Elementos HTML

Curso de Transformaciones y Transiciones en CSS

Clase 6 de 20

Clase 6 / 20

Transformaciones CSS: Scale, Skew y Rotate en Elementos HTML

Curso de Transformaciones y Transiciones en CSS

Clase 6 / 20

Ver clases

Sebastian Heredia#2591027

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>

Comentarios (40)40 comentarios

Carlos Eduardo Gomez García

Hace 5 años

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

!Rotate, Scale, Skew, 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 :D.

Christian Velázquez

Gracias.

Ana Rotela Cabrera

Como siempre tus aportes son muy valiosos ✨ gracias

Sebastian Heredia

te quedo muy genial, me va a servir para practicar ✨

Joel Dominguez Merino

Increíble @Sebastian! No se me había ocurrido hacer un ejemplo como el tuyo donde se puedan visualizar las diferentes transformaciones que hemos estado viendo en estas ultimas 2 clases. Muy buen ejercicio y aporte :)

Gabriel Hernández Valdez

Me imagine asi scale

Beder Danilo Casa Condori

jajaja

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

Platzi Team

Excelente muchas gracais compañero

Juan Gustavo Daza Martínez

Wow bro te quedó excelente, una guía rápida y súper efectiva de como se puede implementar todo lo aprendido!

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.

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.

Giuseppe Ramirez

¡Hola, Andrew! Lo chequeé y tienes razón, gracias por reportar. Le haces mucho bien a esta comunidad 🙏

Benjamin Allen Ramirez Horna

Hace 4 años

a estos cursos*

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?

Wisel Abad Agudelo Ramirez

cuando el objeto va para abajo son valores positivos y para arriba son valores negativos pero eso solo pasa en el eje y, me di cuenta practicando y la verdad no se el porque, pero desde la practica para subir un objeto se restan pixeles, ejemplo si tengo una imagen muy abajo personalmente uso mucho el margin -x px y la posiciono donde quiero, quizás esta mal pero es la única solución que se.

Yo como me lo aprendi fue de la siguiente manera. Cuando me toca trabajar con valores en X o Y. Me imagino las fronteras o los 4 lados de dicho elemento. Cuando es una valor en Y positivo va a ir de arriba hacia abajo. Cuando el valor de Y es negativo, ira de abajo hacia arriba. En el caso de X positiva ira de la izquierda hacia la derecha y si se trata de X negativa ira de la derecha hacia la izquierda. No se si logre explicarme pero siempre me imagino esa caja en el elemento que sea y es como logro identificar hacia donde trasladara mi elemento dependiendo el valor que le daré. Espero le sirva a alguien, saludos :)

Gonzalo Ceron Denetro

Código

Janet Guadalupe Torres Ménera

Hice mi ejercicio y todo bien, solo que me sucedió algo en el CSS, el div que está anidado se bajó unos 30px aprox al momento de meter todo el grupo a un section, esto lo hice para separarlos de las otras propiedades, no encontré la razón por la que esto sucedió, sólo que se resolvió al ponerle un borde. Esto se puede ver en la primera fila con los translate. El ejercicio está aquí (https://codepen.io/Janet11/pen/yLXojEa?editors=1100)

Estefany Aguilar

Profesor

Hola Janet ! Gracias por tu pregunta... Mira, lo que sucede es que todos las etiquetas h tienen un margin por defecto y este es el que hace que tu div anidado se baje. Puedes intentar quitándole el margin a los textos y listo !

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.

Neil Ruiz

Hace 2 años

Un aspecto que vale la pena aclarar, es que en el minuto 8:33 de esta clase la profesora decide asignar el valor de rotateY(20deg) a la propiedad transform, cuyo resultado ella califica como chistoso, pero realmente se trata de un error, ya que la función rotate no separa los ejes X e Y. Esto se debe a que rotate() genera como resultado una única rotación alrededor de un punto de referencia que se establece en la propiedad transform-origin.

En este caso como la propiedad transform-origin no se especifica de forma explícita dentro del código de CSS, el navegador la carga con su valor predeterminado de center, que correponde al punto medio de la caja que aloja el elemento al que se le está aplicando la transformación.

Adicionalmente, una rotación completa corresponde a los 360 grados que tiene una circunferencia, por lo que tampoco tiene mucho sentido aplicar un valor como el 1000deg que se emplea en el minuto 9:09 de esta misma clase.

Jorge Fidel Zubieta Choque

y el metodo matrix?

Hola Jorge !!! El método matrix recibe 6 parámetros matrix(a, b, c, d, tx, ty) donde a, b, c, d son números que describen una transformación y tx, ty son números que describen un traslado... Puedes explorar su funcionamiento aquí: https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_matrix1

me muero mi profe preferida respondiendo mi pregunta! genia total! Gracias!

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

Vicki Esther Avola

Muchas gracias por compartir tu código, me sirvió. Solo que en el transform-rotate utilizaste la propiedad scale cuando en realidad debemos usar rotate. Les dejo el 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 { background-color: #00dbde; background-image: linear-gradient(90deg, #00dbde 0%, #fc00ff 100%); width: 100px; height: 100px; } div:hover { transform: rotate(20deg); } </style> </head> <body> <div></div> </body></html>

Fabian Flores

Notas de la clase

Me agradan tus notas se ven muy bonitas ✨

Gracias, ojala te hayan sido útiles.

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.

Recursos

Resumen

Transformaciones CSS: Scale, Skew y Rotate en Elementos HTML

Transformaciones CSS: Scale, Skew y Rotate en Elementos HTML

Transformaciones CSS: Scale, Skew y Rotate en Elementos HTML

Progreso del curso

Importancia de las animaciones web

Conceptos iniciales

Transformaciones en 2D y 3D

Parallax con transformaciones

Transiciones

Tips de UX

Rendimiento y accesibilidad

Libros recomendados y próximos pasos

Transformaciones CSS: Scale, Skew y Rotate en Elementos HTML

Transformaciones CSS: Scale, Skew y Rotate en Elementos HTML

Recursos

Resumen

Rotate para transformaciones

Scale para transformaciones

Skew para transformaciones

Matrix para transformaciones

Orden en el código para transformaciones

Comentarios

Un pequeño ejemplo 🥺

CODIGO

Recursos

Resumen

Rotate para transformaciones

Scale para transformaciones

Skew para transformaciones

Matrix para transformaciones

Orden en el código para transformaciones

Comentarios

Un pequeño ejemplo 🥺

CODIGO

++Transform rotate, scale, skew y matrix++