Crea una cuenta o inicia sesión

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

Transform translate

5/20
Recursos

Aportes 22

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

Emuladores para que se distraigan haciendo sus diseños
Angry Tools
Gradient Animator
Transform
Marking

Espero que los prueben y se conviertan en unos PRO en esto

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

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

💚

Solo como recordatorio, si usamos porcentajes en translate

transform: translate(50%, 50%)

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

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 ❤️

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

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

🍿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

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

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

Me gusta mas cuando son cursos practicos.

wow increible! me encanto!

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

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>

Notas de la clase

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>

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

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.

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.

✈️ 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

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.