translateX y translateY en el mismo elemento?

¿Es posible aplicar un CC translate X e Y en el mismo elemento?

Si intento esto, el translateX es reemplazado por el translateY: 

.something { 
        transform: translateX(-50%);
        transform: translateY(-50%);
}
Author: web-tiki, 2015-04-15
Source

3 answers

Puedes hacer algo como esto 

transform:translate(-50%,-50%);
 52
Author: Akshay,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-15 11:05:28

En su caso, puede aplicar las traducciones X e Y con la propiedad translate:

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

[fuente: MDN ]

Para su ejemplo, se vería así: 

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

Como se indica en esta respuesta ¿Cómo aplicar múltiples transformaciones en CSS3? puede aplicar varias transformaciones en el mismo elemento especificando en la misma declaración :

.something { 
  transform: translateX(-50%) translateY(-50%);
}
 6
Author: web-tiki,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-27 17:12:04

Puede combinar X e Y se traduce en una sola expresión: 

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

Y, en general, varias se transforman en una sola regla:

transform: translateX(10px) translateY(20px) scale(1.5) rotate(45deg);
 4
Author: joews,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-15 11:07:18