In css qual è lo scopo di transformY? [duplicare]

Question

Ho esaminato alcuni CSS e ho scoperto che utilizzava topcosì come transformY. Voglio sapere perché entrambi vengono utilizzati in questo scenario specifico.

Di seguito è riportato il CSS allegato all'elemento immagine

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

Vorrei sapere che qual è esattamente lo scopo dell'utilizzo della trasformazione qui?

Answer 1

Quando si utilizza absolutela posizione su un elemento, è possibile utilizzare top, right, bottom, e leftgli attributi CSS per posizionarlo in relazione alla appartenenza più vicino che ha una posizione definita (per esempio relative).

translate, Se la sua translateX, translateYo semplicemente translate, si muove il vostro elemento dalla sua posizione calcolata nelle relazioni a se stesso. Un buon esempio del suo utilizzo sarebbe se volessi centrare un elemento posizionato in modo assoluto all'interno del suo genitore.

Vediamo un esempio:

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

Come puoi vedere, child2lo uso translateper centrarlo davvero, poiché tope leftposiziona il suo angolo in alto a sinistra al centro di parent. Usandolo translate(-50%, -50%), lo sposto di metà della sua altezza verso l'alto e verso sinistra, in modo da posizionarlo.

Answer 2

Il problema è che se usi top: 50%il bordo in alto sarà esatto al 50%.

Ora si usa translateY(-50%)per spostare l'elemento del 50% della sua altezza verso l'alto.

In questo esempio puoi vedere che solo top: 50%il bordo superiore è al 50%. Ma vuoi che l'elemento stesso sia centrato verticalmente, quindi dovresti aggiungere la traduzione come nel secondo esempio

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

<div>

</div>

Con translate

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

<div>

</div>

Spesso vedrai proprietà come:

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

Puoi usarlo anche per X. Questo è spesso usato per absolutee fixeddivs per centrarlo verticalmente e orizzontalmente