如何在同一元素上使用 translate3d 和比例尺?

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

对于从右到左 (rtl) 语言,我必须垂直翻转一些元素。问题是元素正在使用 translate3d 进行动画处理。

问题:

如何垂直翻转元素:

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

但是要保留这个片段吗?

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

如果是同一个class,你可以这样做:

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

否则,您将保持 class 不变,只需添加 scale() 属性,例如:

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