How to use translate3d and a scale on the same element?

I have to vertically flip some elements for Right to Left (rtl) languages. Problem is that the elements are being animated in using a translate3d.

QUESTION:

How can I vertically flip an element using:

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

But leave this snippet in tact?

.vertical-carousel-item{
    -webkit-transform: translate3d(75px,-55px,0);
    -moz-transform: translate3d(75px,-55px,0);
    -ms-transform: translate3d(75px,-55px,0);
    -o-transform: translate3d(75px,-55px,0);
    transform: translate3d(75px,-55px,0);
}

Solution

If it is in the same class, you can do it like:

.vertical-carousel-item{
    -webkit-transform: translate3d(75px,-55px,0) scale(-1, 1);
    -moz-transform: translate3d(75px,-55px,0) scale(-1, 1);
    -ms-transform: translate3d(75px,-55px,0) scale(-1, 1);
    -o-transform: translate3d(75px,-55px,0) scale(-1, 1);
    transform: translate3d(75px,-55px,0) scale(-1, 1);
}

Otherwise, you will leave the class as is, and just add the scale() property like:

.vertical-carousel-item{
    -webkit-transform: translate3d(75px,-55px,0);
    -moz-transform: translate3d(75px,-55px,0);
    -ms-transform: translate3d(75px,-55px,0);
    -o-transform: translate3d(75px,-55px,0);
    transform: translate3d(75px,-55px,0);
}
.vertical-carousel-item.someOtherClass{
    -webkit-transform: translate3d(75px,-55px,0) scale(-1, 1);
    -moz-transform: translate3d(75px,-55px,0) scale(-1, 1);
    -ms-transform: translate3d(75px,-55px,0) scale(-1, 1);
    -o-transform: translate3d(75px,-55px,0) scale(-1, 1);
    transform: translate3d(75px,-55px,0) scale(-1, 1);
}