如何在同一元素上使用 translate3d 和比例？ [复制]答案

【问题标题】：How to use translate3d and a scale on the same element? [duplicate]如何在同一元素上使用 translate3d 和比例？ [复制]
【发布时间】：2016-01-28 15:22:04
【问题描述】：

对于从右到左 (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);

但是让这个 sn-p 保持完整吗？

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

【问题讨论】：

不是重复的。过渡不同于变换。
是的，简历被撤回；我在考虑转换和翻译，而不是转换和翻译

标签： css transform css-animations translate

【解决方案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);
}

【讨论】：