Curso de Transformaciones y Transiciones en CSS
Curso de Transformaciones y Transiciones en CSS

Importancia de las animaciones web

1

5 razones para usar animaciones en la web

Conceptos iniciales

2

Propiedades para crear animaciones con CSS y propiedades animables

3

Pseudo-clases y pseudo-elementos en las animaciones

4

Timing functions, planos y ejes

Transformaciones en 2D y 3D

5

Transform translate

6

Transform rotate, scale, skew y matrix

7

Transform origin

8

Transform style y perspective

9

Backface visibility

Parallax con transformaciones

10

Efecto parallax: estructura HTML

11

Efecto parallax: estilos CSS

Transiciones

12

Transition property y duration

13

Transition timing function y delay

Tips de UX

14

Movimiento impulsado por la acción

15

Tiempos de espera

16

Problemas de parpadeo

Rendimiento y accesibilidad

17

Propiedades recomendadas y no recomendadas para animar

18

Aceleración de hardware y la propiedad will-change

19

Preferencias de movimiento reducido

Libros recomendados y próximos pasos

20

Continúa en el Curso de Animaciones con CSS

Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Convierte tus certificados en títulos universitarios en USA

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

19 Días
8 Hrs
45 Min
56 Seg
Curso de Transformaciones y Transiciones en CSS

Curso de Transformaciones y Transiciones en CSS

Estefany Aguilar

Estefany Aguilar

Transform translate

5/20
Recursos

Transform es una propiedad CSS que sirve para transformar un elemento HTML mediante funciones. Estas funciones permitirán trasladar, escalar, rotar o torcer a lo largo, ancho y profundidad del elemento.

Primero, revisaremos las propiedades para transformaciones 2D, es decir en un solo plano. Después, con algunas otras propiedades CSS aplicaremos transformaciones 3D.

Translate para transformaciones

Translate es una función de la propiedad “transform” que te permite trasladar un elemento HTML a través de los ejes del navegador. El valor que recibe puede ser una longitud (px, rem, etc.) o un porcentaje.

selector {
    transform: translate(10px, -10px);
    transform: translate(20%, -20%);
}
Representación de la función translate

Dependiendo del eje en el que traslades el elemento, existe una función.

Tipo Valor con los argumentos que recibe
Eje X y Y translate(x,y)
Eje X translateX(x)
Eje Y translateY(y)
Eje Z translateZ(z)
Múltiple translate3d(x,y,z)

Contribución creada por Andrés Guano.

Aportes 39

Preguntas 7

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

RetaxMaster

RetaxMaster

hace 4 años

Básicamente translate() te permite mover un elemento en el eje X o Y… ¡O ambos! 👀, básicamente este ejemplo que ya había puesto en una clase anterior, vas de un punto A a un punto B:

Ahora, ¡la propiedad transform usos muy interesantes! Un uso que a mí me encantó mucho cuando lo conocí es la posibilidad de poder centrar elementos, tanto verticalmente como horizontalmente, por ejemplo, suponiendo que tenemos un elemento padre con position: relative; y un elemento hijo con position: absolute…

¡Podemos centrarlo usando transform y las propiedades top y left! ¿Cómo? Simplemente hay que decirle al elemento hijo que se muevan 50% en su top y su left:

🤔 Pero esto no está centrado… Aquí es donde podemos usar transform 😉 Simplemente le decimos que tanto en X como en Y se mueva -50%, es decir, que retroceda el 50% de sí mismo, de esa forma quedará totalmente centrado 😄

De esa forma siempre se mantendrá centrado el elemento, esta forma de centrar me encanta cuando trabajamos con elementos posicionados absolutamente 😉.

Angel Millanir

Angel Millanir

hace 3 años

Recuerden, las funciones de transformación no son aplicables a elementos inline, para que no se rompan la cabeza tratando de transformar elementos span, a, etc… sin antes darles un display inline-block o block xD

Jeffer Steven Nuñez Aragon

Jeffer Steven Nuñez Aragon

hace 4 años

Llevo 2 minutos de clase y 30 minutos de jugar con las propiedades.
.
😅😍 It’s fun!
.

💚

Oriana Morillo

Oriana Morillo

hace 3 años

No tenía clara la razón de porqué en el eje Y -20px hace que se traslanslade hacia arriba, ya que tenía en mente que las coordenadas cartesianas los positivos están en el primer cuadrante (derecha y hacia arriba).

Pero conseguí esta información donde explica ese punto:

En las Cordenadas cartesianas, cada punto del espacio Euclidiano es descrito usando dos valores, la abscisa y la ordenada. El origen, el (0, 0) es la esquina superior izquierda del elemento. A diferencia de la convención geométrica habitual, y como la mayoría de los casos en los gráficos por computadora, el eje y (ordenada) va hacia abajo.

https://developer.mozilla.org/es/docs/Web/CSS/transform-function

Andres Alvarez Becerra

Andres Alvarez Becerra

hace 3 años

Solo como recordatorio, si usamos porcentajes en translate

transform: translate(50%, 50%)

Este se traslada respecto a su posición, no a su contenedor.

Reynaldo Francisco Moreno Briceño

Reynaldo Francisco Moreno Briceño

hace 3 años

Les recomiendo que usen propiedades Logicas en css, por el ejemplo en vez de ‘Width’ usen inline-size, y en vez de ‘Heigth’ usen block-size. Aca les dejo una imagen de guia echa por nuestra Profe TeffCode ❤️

CARLOS RODRIGO DEL TORO ORTIZ

CARLOS RODRIGO DEL TORO ORTIZ

hace 3 años

Me gusta mas cuando son cursos practicos.

Carlos Mazzaroli

Carlos Mazzaroli

hace 3 años

🍿Transform translate

❤Ejercicio Transform translate

https://codepen.io/mazzaroli/pen/eYWmQPq

las funciones de transformación no son aplicables a elementos inline, para que no se rompan la cabeza tratando de transformar elementos span, a, etc… sin antes darles un display inline-block o block xD

🧡Centrar elementos con Transform

suponiendo que tenemos un elemento padre con position: relative; y un elemento hijo con position: absolute…

Para centrarlo usaremos transform y las propiedades top y left! ¿Cómo? Simplemente hay que decirle al elemento hijo que se muevan 50% en su top y su left:

Todavía no está centrado… Aquí es donde podemos usar transform. Tanto en X como en Y se mueva -50% para quedar centrado

Laura Altamiranda

Laura Altamiranda

hace 3 años

¿Será posible que Estefany haga todos los cursos? Porfa ❤️

Anggi Vanesa Pallares Solis

Anggi Vanesa Pallares Solis

hace 2 años

No comprendía lo de el eje (Y) que es le negativo iba hacia arriba, me tome en la tarea de realizar un pequeña investigación y que no dude en compartirla.


El plano cartesiacos que comúnmente conocemos cambia esta área que es programación para este caso, no se como sera para los juegos.

Silvia Patricia Granillo Santamaría

Silvia Patricia Granillo Santamaría

hace 3 años

Lo que me encanta de la profe son todas las paginas y recursos que nos proporciona, se nota la dedicacion y profesionalismo que tiene.

Jonathan Andres Vasquez Valle

Jonathan Andres Vasquez Valle

hace 4 años

Una extensión interesante que si usan VScode les permite tener el browser dentro del editor de código, yo la uso junto con live server y va de 10.

https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

Ciro Alejandro Sira Mogollon

Ciro Alejandro Sira Mogollon

hace 4 años

Aqui les dejo el codigo separado
html

<!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>
    <<link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="shadow">
        <div class="circle"></div>
    </div>
</body>
</html>

Y CSS

.shadow{
    background: lightblue;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.circle{
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.circle:hover{
    transform: translate(20px, -20px);
}
Rubén Vega

Rubén Vega

hace un año

Buenas Chicos! En esta clase se me ocurrio customizar el ejercicio agregando backgrounds. Os comparto una captura de pantalla de cuando hago hover en el elemento.

Conforme vaya revisando el curso me gustaria que el elemento girara circularmente uno alrededor del otro

Fabian Flores

Fabian Flores

hace 4 años

Notas de la clase

Mateo Roldán

Mateo Roldán

hace 2 años

¡Este curso mejoro un 200% con los ejemplos prácticos y yendo al código para ver cómo funcionan las propiedades y funciones, felicitaciones a la profe!

Fernando Quinteros Gutierrez

Fernando Quinteros Gutierrez

hace 3 años

✈️ Transform translate

Ideas/conceptos claves

La propiedad CSS transform te permite modificar el espacio de coordenadas del modelo de formato visual CSS. Usándola, los elementos pueden ser trasladados, rotados, escalados o sesgados de acuerdo a los valores establecidos

La función de CSS translate() recoloca un elemento en el eje horizontal y/o vertical

Recursos

transform - CSS | MDN

translate() - CSS | MDN

Apuntes

  • Transform puede hacer que los elementos cambien sus propiedades iniciales

    • Mediante esta propiedad podemos
      1. Trasladar (Cambiar de posición)
      2. Escalar
      3. Rotar
      4. Sesgar

  • Translate como su nombre lo indica traslada el elemento a otro lugar en el plano

translate(tx)

translate(tx, ty)

Donde:

tx

Es un [<length>](https://developer.mozilla.org/es/docs/Web/CSS/length) que representa la abscisa (coordenada x) del vector de translación.

ty

Es un [<length>](https://developer.mozilla.org/es/docs/Web/CSS/length) que representa las ordenadas (coordenada y) del vector de translación. Si no se especifica, su valor es 0. Por ejemplo, translate(2) es equivalente a translate(2, 0).

  • Una alternativa es usar específicamente los ejes respectivos

    translateX(tx)

translateY(ty)

📌 **RESUMEN:** La propiedad transform se encarga de modificar algunos valores iniciales, el cual se ayuda por ejemplo del valor translate que se encarga de mover el elemento a otro lado en el plano cartesiano del navegador
Jorge Fidel Zubieta Choque

Jorge Fidel Zubieta Choque

hace 3 años

wow increible! me encanto!

Víctor Isaac Arias García

Víctor Isaac Arias García

hace 3 años

No pense que en CSS permitiera realizar transiciones de esa manera me gusto esta clase

Juan Miguel Garcia Carballo

Juan Miguel Garcia Carballo

hace 3 años

Literalmente si las clases de Estefany no tuvieran tanto relleno serian mucho mas simples y mas rápidas. No cansarían tanto y uno se podría concentrar mas y mejor.

Alejandro Ivan Mendieta

Alejandro Ivan Mendieta

hace 3 años

Los ejes no están como un plano cartesiano.
Cada elemento tiene el eje en forma de L invertida , por lo que, X positiva sigue dando a la derecha pero Y positiva da hacia abajo.

Rodolfo Vargas

Rodolfo Vargas

hace 3 años

Que les parece mi transition? ❤️

<!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>
    .shadow{
      background: lightblue;
      border-radius: 50%;
      width: 100px;
      height: 100px;
    }

    .circle {
      background-color: #85FFBD;
      background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
      width: 100px;
      border-radius: 50%;
      height: 100px;
      transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    .circle:hover {
      transform: translate(-20px, 20px);
      transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    }
  </style>
</head>
<body>
  <div class="shadow">
    <div class="circle"></div>
  </div>
</body>
</html>
Sebastian Heredia

Sebastian Heredia

hace 4 años

Por aquí les dejo el código para jugar con las propiedades:

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

        .shadow{
            background: lightblue;
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        .circle{
            background-color: #4158D0;
            background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        .circle:hover{
            transform: translate(-20px, 20px);
	    Aqui podemos jugar con todas las propiedades que tenemos en los recursos.
        }

    </style>
</head>
<body>
    <div class="shadow">
        <div class="circle"></div>
    </div>
</body>
</html>
Fiorela Alvarado avalos

Fiorela Alvarado avalos

hace 3 meses
y que ace una transformacion
Fiorela Alvarado avalos

Fiorela Alvarado avalos

hace 3 meses
que es transformacion
Raúl Adolfo Sánchez Rodríguez

Raúl Adolfo Sánchez Rodríguez

hace 9 meses
⭐Ejemplo de aplicación de propiedades **transition** y **transform** cuyo valor será la función **scale( )** * Demo:![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdjc3cThhYzlwcms3bzQ4b212OGdubW9najd1eXk5OTB3OXRxcmY2YyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/1HImZiETlEhCc2snPM/giphy.gif) * Código: * ![](https://static.platzi.com/media/user_upload/E4_GIF-propiedad%20transform%20y%20funci%C3%B3n%20SCALE%28%20%29-44225233-898f-415a-8b0b-bb7aa3314b93.jpg)
Raúl Adolfo Sánchez Rodríguez

Raúl Adolfo Sánchez Rodríguez

hace 9 meses
⭐Ejemplo de aplicación de propiedades **transition** y **transform** cuyo valor será la función **translate( )** * Demo: ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExeTFsMXUxbjhtemM0MHhvNTZpc3hicHZvZmpkMHhsMnl6MjB1OTJtZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/LpRMm1aiYGVLE9tkzI/giphy.gif) * Código: ![]()![]()![](https://static.platzi.com/media/user_upload/E3_GIF-propiedad%20transform%20y%20funci%C3%B3n%20translate%28%20%29-1fe17025-330a-4279-9b48-b688ff5a00e2.jpg)
Raúl Adolfo Sánchez Rodríguez

Raúl Adolfo Sánchez Rodríguez

hace 9 meses
⭐Ejemplo de aplicación de propiedad **animation** y la at-rule **@keyframe** * Demo:![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZTA1aDdkODNqaHR0NXU0NW5xMzhleDEydTFjd3RzaDhldnFoOXViYiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/fX5SH75JTqUueUH4oG/giphy.gif) * Código: * ![](https://static.platzi.com/media/user_upload/E2_GIF-propiedad%20transform%20y%20funci%C3%B3n%20translate%28%20%29-c32cc89f-452f-4af1-ad73-2c7945f611ce.jpg)
Raúl Adolfo Sánchez Rodríguez

Raúl Adolfo Sánchez Rodríguez

hace 9 meses
⭐Ejemplo de aplicación de propiedad **animation** y la at-rule **@keyframe** * Demo:![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExejN6Z2I1d3F0b2V3MjBsd2IzbGd1bHkycmQxOTZ2M3Y0emE0N2x0OSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/bprTpPRCxqrpvDakc2/giphy.gif) * Código: * ![](https://static.platzi.com/media/user_upload/E2_GIF-propiedad%20transform%20y%20funci%C3%B3n%20translate%28%20%29-39ad1756-b4b3-4ee2-a23f-81d0b10fa4da.jpg)
Raúl Adolfo Sánchez Rodríguez

Raúl Adolfo Sánchez Rodríguez

hace 9 meses
⭐Ejemplo de aplicación de propiedades **transition** y **transform** cuyo valor será la función **translate( )** ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExejN6Z2I1d3F0b2V3MjBsd2IzbGd1bHkycmQxOTZ2M3Y0emE0N2x0OSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/bprTpPRCxqrpvDakc2/giphy.gif) * Código: * ![](https://static.platzi.com/media/user_upload/Propiedades%20aplicadas-5fba2911-ad75-42e5-8f2d-08ea1fa33ebc.jpg)
Diego Morales

Diego Morales

hace 10 meses
*Transform* es una propiedad CSS que sirve para **transformar un elemento HTML mediante funciones**. Estas funciones permitirán trasladar, escalar, rotar o torcer a lo largo, ancho y profundidad del elemento. Primero, revisaremos las propiedades para transformaciones 2D, es decir en un solo plano. Después, con algunas otras propiedades CSS aplicaremos transformaciones 3D. ## Translate para transformaciones *Translate* es una función de la propiedad “transform” que te permite **trasladar un elemento HTML a través de los ejes del navegador**. El valor que recibe puede ser una **longitud** (px, rem, etc.) o un **porcentaje**. `selector` { ` transform: translate`(10px, -10px); ` transform: translate`(20%, -20%); } ![Representación de la función translate](https://static.platzi.com/media/articlases/Images/animationland04.PNG) Dependiendo del eje en el que traslades el elemento, existe una función. **TipoValor con los argumentos que recibe**Eje X y Ytranslate(x,y)Eje XtranslateX(x)Eje YtranslateY(y)Eje ZtranslateZ(z)Múltipletranslate3d(x,y,z) > * [Ejemplo usando translate(x,y)](https://codi.link/PGRpdiBjbGFzcz0ib3JpZ2luIj4NCiAgPGRpdiBjbGFzcz0idHJhbnNsYXRlIj5TZcOxw6FsYW1lPC9kaXY+DQo8L2Rpdj4NCg0K%7CZGl2ew0KICBtYXJnaW46IDVyZW07DQogIHdpZHRoOiAyMDBweDsNCiAgaGVpZ2h0OiAyMDBweDsNCiAgYm9yZGVyLXJhZGl1czogNTAlOw0KfQ0KDQoub3JpZ2luew0KICBkaXNwbGF5OiBncmlkOw0KICBwbGFjZS1jb250ZW50OiBjZW50ZXI7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgYmFja2dyb3VuZC1jb2xvcjogZ3JleTsNCiAgYm9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7DQoNCn0NCg0KLnRyYW5zbGF0ZXsNCiAgYm9yZGVyOiAxcHggc29saWQgYmxhY2s7DQogIGJhY2tncm91bmQtY29sb3I6IHNreWJsdWU7DQogIGZvbnQtc2l6ZTogMnJlbTsNCiAgZGlzcGxheTogZ3JpZDsNCiAgcGxhY2UtY29udGVudDogY2VudGVyOw0KICBjdXJzb3I6IHBvaW50ZXI7DQoNCn0NCg0KLyogwqFQcnVlYmEgY29uIGxvIHF1ZSBxdWllcmFzISEgKi8NCi50cmFuc2xhdGU6aG92ZXIgew0KICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSg1MHB4LCA1MHB4KTsNCn0=%7C). * [Ejemplo usando translateX(x) y translateY(y)](https://codi.link/PGRpdiBjbGFzcz0iY29udGFpbmVyIj4NCiAgPGRpdiBjbGFzcz0ic2hhZG93Ij4NCiAgPGRpdiBjbGFzcz0idHJhbnNsYXRlIGVqZVgiPnRyYW5zbGF0ZVg8L2Rpdj4NCjwvZGl2Pg0KDQo8ZGl2IGNsYXNzPSJzaGFkb3ciPg0KICA8ZGl2IGNsYXNzPSJ0cmFuc2xhdGUgZWplWSI+dHJhbnNsYXRlWTwvZGl2Pg0KPC9kaXY+DQo8L2Rpdj4NCg0K%7CLmNvbnRhaW5lciB7DQogIGRpc3BsYXk6IGZsZXg7DQogIHdpZHRoOiAxMDAlOw0KICBoZWlnaHQ6IDEwMHZoOw0KICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDsNCiAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCn0NCg0KLmNvbnRhaW5lciBkaXZ7DQogIHdpZHRoOiAyMDBweDsNCiAgaGVpZ2h0OiAyMDBweDsNCiAgYm9yZGVyLXJhZGl1czogNTAlOw0KDQoNCn0NCg0KLnNoYWRvd3sNCiAgYm9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7DQogIGJhY2tncm91bmQtY29sb3I6IGdyZXk7DQp9DQoNCi50cmFuc2xhdGV7DQogIGRpc3BsYXk6IGdyaWQ7DQogIGJvcmRlcjogMXB4IHNvbGlkIGJsYWNrOw0KICBwbGFjZS1jb250ZW50OiBjZW50ZXI7DQogIGZvbnQtc2l6ZTogMS41cmVtOw0KICBiYWNrZ3JvdW5kLWNvbG9yOiBza3libHVlOw0KICBjdXJzb3I6IHBvaW50ZXI7DQoNCn0NCg0KLyogwqFQcnVlYmEgY29uIGxvIHF1ZSBxdWllcmFzISEgKi8NCi5lamVYOmhvdmVyIHsNCiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDUwcHgpOw0KfQ0KDQouZWplWTpob3ZlciB7DQogIHRyYW5zZm9ybTogdHJhbnNsYXRlWSg1MHB4KTsNCn0=%7C).
David Azael Rangel González

David Azael Rangel González

hace un año
Les comparto la documentación para que puedan profundizar en las otras propiedades: <https://developer.mozilla.org/en-US/docs/Web/CSS/transform> Y Y mi código para puedan jugar con esas propieades: (PD. Team Platzi, en mi comentario anterior, ¿fue un bug de la plataforma? Copié y pegué el código y se duplicó y le quitó el formato de código) ```js <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(90px, auto); margin-left: 30vh; } .shadow { background: gray; border-radius: 100%; width: 100px; height: 100px; } .circle { background-color: #08AEEA; border-radius: 100%; background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%); width: 100px; height: 100px; } .circle:hover{ transform: translate(-20px, 20px); } .shadowOne { background: gray; border-radius: 100%; width: 100px; height: 100px; } .circleOne { background-color: #00DBDE; background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%); border-radius: 100%; width: 100px; height: 100px; } .circleOne:hover{ transform: translateX(20px); } .shadowTwo { background: gray; border-radius: 100%; width: 100px; height: 100px; } .circleTwo { background-color: #52ACFF; background-image: linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%); border-radius: 100%; width: 100px; height: 100px; } .circleTwo:hover{ transform: matrix(3, 2, 1, 1, 2, 3); } .shadowThree { margin-top: 3vh; background: gray; border-radius: 100%; width: 100px; height: 100px; } .circleThree { background-color: #FFE53B; background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%); border-radius: 100%; width: 100px; height: 100px; } .circleThree:hover{ transform: translate(60px, 50%); } .shadowFour { margin-top: 3vh; background: gray; border-radius: 100%; width: 100px; height: 100px; } .circleFour { background-color: #FA8BFF; background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%); border-radius: 100%; width: 100px; height: 100px; } .circleFour:hover{ transform: scale(1, 0.45); } .shadowFive { margin-top: 3vh; background: gray; border-radius: 100%; width: 100px; height: 100px; } .circleFive { background-color: #F4D03F; background-image: linear-gradient(132deg, #F4D03F 0%, #16A085 100%); border-radius: 100%; width: 100px; height: 100px; } .circleFive:hover{ transform: rotate(0.5turn); } .shadowSix { margin-top: 3vh; background: gray; border-radius: 100%; width: 100px; height: 100px; } .circleSix { background-color: #FAD961; background-image: linear-gradient(90deg, #FAD961 0%, #F76B1C 100%); border-radius: 100%; width: 100px; height: 100px; } .circleSix:hover{ transform: skew(30deg, 20deg); } .shadowSeven { margin-top: 3vh; background: gray; border-radius: 100%; width: 100px; height: 100px; } .circleSeven { background-color: #FF3CAC; background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%); border-radius: 100%; width: 100px; height: 100px; } .circleSeven:hover{ transform: scale(0.75) translate(-90%, -15%); } </style> </head> <body>
Test Text
</body> </html> ```
David Azael Rangel González

David Azael Rangel González

hace un año
Les comparto la documentación para que puedan profundizar en las otras propiedades:\\<html *lang*="en">\<head>    \<meta *charset*="UTF-8">    \<meta *name*="viewport" *content*="width=device-width, initial-scale=1.0">    \<title>Document\</title>    \<style>                *.grid* {            display: grid;            grid-template-columns: repeat(3, 1fr);            grid-auto-rows: minmax(90px, auto);            margin-left: 30vh;        }         *.shadow* {            background: gray;            border-radius: 100%;            width: 100px;            height: 100px;        }         *.circle* {            background-color: #08AEEA;            border-radius: 100%;            background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);            width: 100px;            height: 100px;        }         *.circle:hover*{            transform: translate(-20px, 20px);        }         *.shadowOne* {            background: gray;            border-radius: 100%;            width: 100px;            height: 100px;        }         *.circleOne* {            background-color: #00DBDE;            background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);            border-radius: 100%;            width: 100px;            height: 100px;        }         *.circleOne:hover*{            transform: translateX(20px);        }         *.shadowTwo* {            background: gray;            border-radius: 100%;            width: 100px;            height: 100px;        }         *.circleTwo* {            background-color: #52ACFF;            background-image: linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%);            border-radius: 100%;            width: 100px;            height: 100px;        }         *.circleTwo:hover*{            transform: matrix(3, 2, 1, 1, 2, 3);        }         *.shadowThree* {            margin-top: 3vh;            background: gray;            border-radius: 100%;            width: 100px;            height: 100px;        }         *.circleThree* {            background-color: #FFE53B;            background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);            border-radius: 100%;            width: 100px;            height: 100px;        }         *.circleThree:hover*{            transform:  translate(60px, 50%);        }         *.shadowFour* {            margin-top: 3vh;            background: gray;            border-radius: 100%;            width: 100px;            height: 100px;        }         *.circleFour* {            background-color: #FA8BFF;            background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);            border-radius: 100%;            width: 100px;            height: 100px;        }         *.circleFour:hover*{            transform:  scale(1, 0.45);        }         *.shadowFive* {            margin-top: 3vh;            background: gray;            border-radius: 100%;            width: 100px;            height: 100px;        }         *.circleFive* {            background-color: #F4D03F;            background-image: linear-gradient(132deg, #F4D03F 0%, #16A085 100%);            border-radius: 100%;            width: 100px;            height: 100px;        }         *.circleFive:hover*{            transform:  rotate(0.5turn);        }         *.shadowSix* {            margin-top: 3vh;            background: gray;            border-radius: 100%;            width: 100px;            height: 100px;        }         *.circleSix* {            background-color: #FAD961;            background-image: linear-gradient(90deg, #FAD961 0%, #F76B1C 100%);            border-radius: 100%;            width: 100px;            height: 100px;        }         *.circleSix:hover*{            transform:   skew(30deg, 20deg);        }         *.shadowSeven* {            margin-top: 3vh;            background: gray;            border-radius: 100%;            width: 100px;            height: 100px;        }         *.circleSeven* {            background-color: #FF3CAC;            background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);            border-radius: 100%;            width: 100px;            height: 100px;        }         *.circleSeven:hover*{            transform:   scale(0.75) translate(-90%, -15%);        }            \</style>\</head>\<body>     \
        \
            \
\
        \
        \
            \
\
        \
        \
            \
\
        \
        \
            \
\
        \
        \
            \
\
        \
        \
            \
Test Text \
        \
        \
            \
\
        \
        \
            \
\
        \
    \
\</body>\</html> <https://developer.mozilla.org/en-US/docs/Web/CSS/transform> Y mi código para puedan jugar con esas propieades: ```js <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(90px, auto); margin-left: 30vh; } .shadow { background: gray; border-radius: 100%; width: 100px; height: 100px; } .circle { background-color: #08AEEA; border-radius: 100%; background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%); width: 100px; height: 100px; } .circle:hover{ transform: translate(-20px, 20px); } .shadowOne { background: gray; border-radius: 100%; width: 100px; height: 100px; } .circleOne { background-color: #00DBDE; background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%); border-radius: 100%; width: 100px; height: 100px; } .circleOne:hover{ transform: translateX(20px); } .shadowTwo { background: gray; border-radius: 100%; width: 100px; height: 100px; } .circleTwo { background-color: #52ACFF; background-image: linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%); border-radius: 100%; width: 100px; height: 100px; } .circleTwo:hover{ transform: matrix(3, 2, 1, 1, 2, 3); } .shadowThree { margin-top: 3vh; background: gray; border-radius: 100%; width: 100px; height: 100px; } .circleThree { background-color: #FFE53B; background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%); border-radius: 100%; width: 100px; height: 100px; } .circleThree:hover{ transform: translate(60px, 50%); } .shadowFour { margin-top: 3vh; background: gray; border-radius: 100%; width: 100px; height: 100px; } .circleFour { background-color: #FA8BFF; background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%); border-radius: 100%; width: 100px; height: 100px; } .circleFour:hover{ transform: scale(1, 0.45); } .shadowFive { margin-top: 3vh; background: gray; border-radius: 100%; width: 100px; height: 100px; } .circleFive { background-color: #F4D03F; background-image: linear-gradient(132deg, #F4D03F 0%, #16A085 100%); border-radius: 100%; width: 100px; height: 100px; } .circleFive:hover{ transform: rotate(0.5turn); } .shadowSix { margin-top: 3vh; background: gray; border-radius: 100%; width: 100px; height: 100px; } .circleSix { background-color: #FAD961; background-image: linear-gradient(90deg, #FAD961 0%, #F76B1C 100%); border-radius: 100%; width: 100px; height: 100px; } .circleSix:hover{ transform: skew(30deg, 20deg); } .shadowSeven { margin-top: 3vh; background: gray; border-radius: 100%; width: 100px; height: 100px; } .circleSeven { background-color: #FF3CAC; background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%); border-radius: 100%; width: 100px; height: 100px; } .circleSeven:hover{ transform: scale(0.75) translate(-90%, -15%); } </style> </head> <body>
Test Text
</body> </html> ```
LESTHER XITUMUL MANUEL

LESTHER XITUMUL MANUEL

hace un año
Cada vez voy comprendiendo más contenido de la Cheat Sheet que nos compartieron al principio jeje
Luis Antonio Martínez Cárcamo

Luis Antonio Martínez Cárcamo

hace 2 años

transform: translate(x, y) es una propiedad de CSS que permite mover un elemento en el plano x-y. La propiedad translate se puede utilizar para mover un elemento horizontalmente o verticalmente en el plano x-y. Los valores x y y pueden ser especificados en píxeles o en porcentajes y pueden ser negativos o positivos, dependiendo de la dirección en la que se desea mover el elemento.

Por ejemplo, transform: translate(50px, -30px) moverá el elemento 50 píxeles a la derecha y 30 píxeles hacia arriba.

Este es un ejemplo de código que muestra cómo se puede usar translate en CSS:

css

.element {
   transform: translate(50px, -30px);
}

Es importante tener en cuenta que translate es una de las varias propiedades de transformación disponibles en CSS, incluyendo scale, rotate y skew.

Anggi Vanesa Pallares Solis

Anggi Vanesa Pallares Solis

hace 2 años

Ana Rotela Cabrera

Ana Rotela Cabrera

hace 2 años

Justamente esta parte aparece en las preguntas del examen, a tenerlo en cuenta ✨
En el eje X es a la derecha y en el eje Y es arriba

transform: translate(20px,-20px);
Jimer Samuel Espinoza

Jimer Samuel Espinoza

hace 2 años

Mi codigo de esta clase

<!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>
      .shadow {
        background: lightgray;
        border-radius: 50%;
        width: 100px;
        height: 100px;
      }
      .circle {
        background-color: #0093e9;
        background-image: linear-gradient(
          160deg,
          #0093e9 0%,
          #80d0c7 50%,
          #ffffff 100%
        );
        border-radius: 50%;
        width: 100px;
        height: 100px;
      }

      .circle:hover {
        transform: translate(20px, -20px);
      }
    </style>
  </head>
  <body>
    <div class="shadow">
      <div class="circle"></div>
    </div>
  </body>
</html>
Sergio Corzo

Sergio Corzo

hace 3 años

La función translate toma como punto de inicio el centro del elemento, asi si le dices que se mueva 20px en ejej x se movera hacia la derecha.