CSS'de transformY'nin amacı nedir? [çiftleme]

Question

Bazı CSS bakarak ve onu kullanıyordum öğrendim edilmiştir topyanı sıra transformY. Bu özel senaryoda neden her ikisinin de kullanıldığını bilmek istiyorum.

Resim öğesine eklenen CSS aşağıdadır

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

Burada dönüşümü kullanmanın amacının tam olarak ne olduğunu bilmek istiyorum.

Answer 1

Kullandığınız zaman absolutebir eleman üzerinde pozisyon kullanabileceğiniz top, right, bottomve lefttanımlanmış bir konuma (örneğin sahiptir yakın ebeveyn ile ilgili olarak konumlandırmak için CSS özelliklerini relative).

translate, Dolayısıyla ister translateX, translateYya da sadece translate, kendisine ilişkilerinde hesaplanan pozisyonundan sizin elemanını taşır. Bunun kullanımı için iyi bir örnek, mutlak konumlandırılmış bir öğeyi ebeveyninin içinde ortalamak istemeniz olabilir.

Bir örnek görelim:

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

Gördüğünüz gibi üzerinde child2kullandığım translateiçin çünkü gerçekten bunu ortalamak topve leftmerkezi üzerindeki sol üst köşesini yerleştirir parent. Kullanarak translate(-50%, -50%), konumlandırmak için yüksekliğinin yarısı kadar yukarı ve sola hareket ettiriyorum.

Answer 2

Sorun şu ki top: 50%, üstteki sınırı kullanırsanız % 50 oranında kesin olacaktır.

Şimdi translateY(-50%), öğeyi yüksekliğinin% 50'sini yukarı taşımak için kullanıyorsunuz .

Bu örnekte, sadece top: 50%üst sınırın% 50'de olduğunu görebilirsiniz . Ancak öğenin dikey olarak ortalanmasını istiyorsunuz, bu nedenle ikinci örnekteki gibi tranlate eklemeniz gerekir.

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

<div>

</div>

Çeviri ile

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

<div>

</div>

Genellikle aşağıdaki gibi özellikler göreceksiniz:

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

X için de kullanabilirsiniz. Bu genellikle dikey ve yatay olarak ortalamak için kullanılır absoluteve fixedböler