Em css, qual é o propósito de transformY? [duplicado]

Question

Eu tenho procurado em algum CSS e descobri que ele estava usando top, bem como transformY. Quero saber por que ambos estão sendo usados ​​neste cenário específico.

A seguir está o CSS anexado ao elemento de imagem

position: absolute;
width: 100%;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%)

Gostaria de saber qual é exatamente o propósito de usar transform aqui?

Answer 1

Quando você estiver usando absoluteposição sobre um elemento, você pode usar top, right, bottom, e leftatributos CSS para posicioná-la em relação ao pai mais próximo que tem uma posição definida (por exemplo relative).

translate, seja isso translateX, translateYou apenas translate, move seu elemento de sua posição calculada em relação a ele mesmo. Um bom exemplo para seu uso seria se você quisesse centralizar um elemento posicionado de forma absoluta dentro de seu pai.

Vamos ver um exemplo:

#parent {
position: relative;
width: 200px;
height: 200px;
background: blue;
}

#parent #child {
position: absolute;
left: 50%;
top: 50%;
}

#parent2 {
position: relative;
width: 200px;
height: 200px;
background: green;
}

#parent2 #child2 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

<div id="parent">
  <label id="child">LABEL</label>
</div>

<div id="parent2">
  <label id="child2">LABEL2</label>
</div>

Como você pode ver, em child2eu uso translatepara realmente centralizá-lo, pois tope leftposiciona seu canto superior esquerdo no centro de parent. Ao usar translate(-50%, -50%), estou movendo metade de sua altura para cima e para a esquerda, a fim de posicioná-lo.

Answer 2

O problema é que se usar top: 50%a borda na parte superior ficará exata em 50%.

Agora você usa translateY(-50%)para mover o elemento 50% de sua altura para cima.

Neste exemplo, você pode ver que apenas top: 50%a borda superior está em 50%. Mas você quer que o próprio elemento seja centralizado verticalmente, então você precisa adicionar tradução como no segundo exemplo

div {
   background: red;
   height: 300px;
   width: 300px;
   position: absolute;
   top: 50%;
}

<div>

</div>

Com traduzir

div {
   background: red;
   height: 300px;
   width: 300px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}

<div>

</div>

Freqüentemente, você verá propriedades como:

top: 50%,
left: 50%;
transform: translate(-50%,-50%);

Você pode usá-lo para X também. Isso geralmente é usado para absolutee fixeddivs para centralizá-lo verticalmente e horizontalmente