Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷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:

3D
13H
22M
28S

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 鈥渢ransform鈥 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 27

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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鈥檚 fun!
.

馃挌

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

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 鈥榃idth鈥 usen inline-size, y en vez de 鈥楬eigth鈥 usen block-size. Aca les dejo una imagen de guia echa por nuestra Profe TeffCode 鉂わ笍

馃嵖Transform translate

鉂jercicio 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

驴Ser谩 posible que Estefany haga todos los cursos? Porfa 鉂わ笍

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.

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

Notas de la clase

鉁堬笍 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

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

wow increible! me encanto!

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

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.

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.

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>

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>

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.

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

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>

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.

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.