如何在同一个元素上使用translate3d和scale？

Question

我必须垂直翻转一些从右到左（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);
}

Answer 1

如果它在同一个班级，你可以这样做：

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

否则，您将保持原样，只需添加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);
}