translateX and translateY on same element?

CssCss Transforms

Css Problem Overview


Is it possible to apply a CC translate X and Y on the same element?

If I try this the translateX is overridden by the translateY:

.something { 
        transform: translateX(-50%);
        transform: translateY(-50%);
}

Css Solutions


Solution 1 - Css

You can do something like this

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

Solution 2 - Css

In your case, you can apply both X and Y translations with the translate property :

> transform: translate(tx[, ty]) /* one or two <translation-value> values */

[source: MDN]

for your example, it would look like this :

.something { 
  transform: translate(-50%,-50%);
}

DEMO:

div{
  position:absolute;
  top:50%; left:50%;
  width:100px; height:100px;
  transform: translate(-50%,-50%);
  background:tomato;
}

<div></div>


As stated by this answer How to apply multiple transforms in CSS3? you can apply several transforms on the same element by specifying them on the same declaration :

.something { 
  transform: translateX(-50%) translateY(-50%);
}

Solution 3 - Css

You can combine X and Y translates into a single expression:

transform: translate(10px, 20px); /* translate X by 10px, y by 20px */

And, in general, several transforms into a single rule:

transform: translateX(10px) translateY(20px) scale(1.5) rotate(45deg);

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionEvanssView Question on Stackoverflow
Solution 1 - CssAkshayView Answer on Stackoverflow
Solution 2 - Cssweb-tikiView Answer on Stackoverflow
Solution 3 - CssjoewsView Answer on Stackoverflow