In css what is the purpose of transformY?

Question

I have been looking at some CSS and found out that it was using top as well as transformY. I want to know why both are being used in this specific scenario.

Following is the CSS attached to image element

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

I would like to know that what exactly is the purpose of using transform here ?

to align the element vertically at the center, `-50%` of the `translateY` is based on the element height, while the top percentage is based on the relative parent height. — Abdelillah Aissani, Oct 14 '20 at 09:10
It looks like it's shifting it up by 50% of the element's height - try toggling the transform on and off [here](https://jsfiddle.net/2rq83usx/). — James Whiteley, Oct 14 '20 at 09:18
Does this answer your question? [What is the CSS transform:translate() property ultimately for?](https://stackoverflow.com/questions/11110972/what-is-the-css-transformtranslate-property-ultimately-for) or https://stackoverflow.com/questions/46184458/transform-translate-50-50 — MaxiGui, Oct 14 '20 at 09:20
@MohsinSethi if you want to ask questions specific to a case scenario, you could also post the relevant HTML code too i.e. a complete MRE see (stackoverflow.com/help/minimal-reproducible-example) then I would understand how it's not a duplicate but asking just "what is the purpose of transform()" is a duplicate in this case. — avia, Oct 14 '20 at 09:35

score 0 · Answer 1 · answered Oct 14 '20 at 09:15

The problem is that if you use top: 50% the border at the top will be exact at 50%.

Now you use translateY(-50%) to move the element 50% of its height up.

At this example you can see that with only top: 50% the top border is at 50%. But you want the element itself to be centered vertically so you would need to add tranlate like in the second exapmle

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

<div>

</div>

With translate

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

<div>

</div>

Often you will see properties like:

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

You can use it for X aswell. This is often used for absolute and fixed divs to center it vertically and horizontally

score 0 · Accepted Answer · answered Oct 14 '20 at 09:15

When you are using absolute position on an element, you can use top, right, bottom, and left CSS attributes to position it in relation to the nearest parent which has a defined position (e.g. relative).

translate, whether its translateX, translateY or just translate, moves your element from its calculated position in relations to itself. A good example for its usage would be if you wanted to center an absolute positioned element inside its parent.

Lets see an example:

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

As you can see, on child2 I use translate in order to really center it, since top and left places its upper left corner on the center of parent. By using translate(-50%, -50%), I'm moving it half of its height up and left, in order to position it.

In css what is the purpose of transformY?

2 Answers2