translateX and translateY on same element?

Question

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%);
}

possible duplicate of [How to apply multiple transforms in CSS3?](http://stackoverflow.com/questions/10765755/how-to-apply-multiple-transforms-in-css3) — Jeroen, Apr 15 '15 at 11:05
I understand this is a demo, but just rememeber to include browser prefixing as well — jbutler483, Apr 15 '15 at 11:05
@mattytommo Isn't it? Wouldn't `.something { transform: translateX(-50%) translateY(-50%); }` be a solution? — Jeroen, Apr 15 '15 at 11:06
@Jeroen It would, but the real answer is the existence of the `translate` property which encompasses both axes, thus removing the need for duplicate properties. — Mathew Thompson, Apr 15 '15 at 11:12

score 108 · Accepted Answer · edited Apr 15 '15 at 11:05

108

You can do something like this

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

edited Apr 15 '15 at 11:05

Mathew Thompson

answered Apr 15 '15 at 11:04

Akshay

web-tiki · Answer 2 · 2017-07-27T17:12:04.983

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 */

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%);
}

score 8 · Answer 3 · answered Apr 15 '15 at 11:07

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);

3 Answers3