translatex - translate3d css example

translateX y translateY en el mismo elemento?

Question

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

Si intento esto, la traducción Y se reemplaza por la translateY:

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

Answer 1

En su caso, puede aplicar 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%);
}

MANIFESTACIÓN:

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

<div></div>

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

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

Answer 2

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

Answer 3

Puedes hacer algo como esto

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