Todos,

Me gustaría poder usar calc () con transform: translateX en mi CSS.

P.ej.,

#myDiv {
  -webkit-transform: translateX(calc(100% - 50px));
  -moz-transform: translateX(calc(100% - 50px));
  transform: translateX(calc(100% - 50px));
}

Si bien esto funciona perfectamente en Chrome, Safari y Firefox, no funciona en IE10 o IE11.

Puedes ver un ejemplo simple aquí:http://jsfiddle.net/SL2mk/9/

¿Es esto imposible? ¿Es un error en IE, o escalc() ¿No se supone que funciona en este contexto?

Por lo que vale - leoaquí que puedes "apilar"translateX Para lograr el mismo efecto, y mi prueba parece confirmar esto. Es decir.,

#div {
  transform: translateX(calc(100% - 50px));
}

es lo mismo que:

#div {
  transform: translateX(100%) translateX(-50px);
}

Pero no sé si esta es la mejor, la más confiable y la forma más segura de hacerlo.

También sé que es posible usarleft en lugar detranslateX, pero este último es mucho más suave cuando se usa con transiciones, ya que, según tengo entendido, obliga al uso de la GPU para manejar la animación.

Gracias de antemano por su consejo y visión!