Jaki jest cel transformY w css? [duplikować]

Question

Patrzyłem na niektóre CSS i odkryłem, że używa on toprównież transformY. Chcę wiedzieć, dlaczego oba są używane w tym konkretnym scenariuszu.

Poniżej znajduje się CSS dołączony do elementu obrazu

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

Chciałbym wiedzieć, jaki dokładnie jest cel użycia transformacji tutaj?

Answer 1

Kiedy używasz absolutepozycję na elemencie, można użyć top, right, bottomoraz leftatrybuty CSS, aby umieścić go w odniesieniu do najbliższego rodzica, który ma określoną pozycję (na przykład relative).

translate, czy to translateX, translateYczy tylko translate, przesuwa twój element z jego obliczonej pozycji w relacjach do samego siebie. Dobrym przykładem jego użycia byłoby wyśrodkowanie elementu pozycjonowanego bezwzględnie wewnątrz jego elementu nadrzędnego.

Zobaczmy przykład:

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

Jak widać, child2używam translate, aby naprawdę go wyśrodkować, ponieważ topi leftumieszcza jego lewy górny róg na środku parent. Używając translate(-50%, -50%), przesuwam go o połowę jego wysokości w górę i w lewo, aby go ustawić.

Answer 2

Problem polega na tym, że jeśli użyjesz top: 50%granicy na górze będzie dokładna na 50%.

Teraz używamy translateY(-50%)do przesunięcia elementu o 50% jego wysokości w górę.

W tym przykładzie widać, że tylko top: 50%górna granica wynosi 50%. Ale chcesz, aby sam element był wyśrodkowany w pionie, więc musisz dodać tranlate jak w drugim przykładzie

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

<div>

</div>

Z translate

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

<div>

</div>

Często zobaczysz takie właściwości jak:

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

Możesz go również użyć dla X. Jest to często używane dla absolutei fixeddivs do wyśrodkowania go w pionie i poziomie