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

Question

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

It isnt a duplicate. Transition are different than Transforms. — Armeen Moon, Oct 28 '15 at 17:50
Yeah, CV retracted; I was thinking of transition and translate, not transform and translate — TylerH, Oct 28 '15 at 17:51

Jacob G · Accepted Answer · 2015-10-28T17:52:18.613

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

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

QUESTION:

1 Answers1