如何在CSS变换属性中仅更改一个函数而保留多个函数？

Question

我有一个div，css如下所示：

.container {
    width: 100%;
    height: 100%;
    transition: 0.5s;
    transform-style: preserve-3d; 
    transform: rotateY(0deg) translateZ(-404.747px);
}

现在，我希望使用jQuery来更改transform属性为：

transfrom: rotateY(-40deg) translateZ(-404.747px);

如果我使用

$('.container').css('transform', 'rotateY(-40deg) translateZ(-404.747px)');

那么，'translateZ（- 404.747px）'将再次发挥作用。 因此，我的问题是如何改变rotateY（）的值，而不改变'translateZ（）'的值？

- keben hu

---

我不确定实际的实现方式，但是你可以在它周围包装另一个元素，然后应用rotateY——如果这对你足够的话，就不会有太大问题。 - androidavid

只需在 container 类上应用 rotateY(-40deg) 即可。 - A l w a y s S u n n y

Answer 1

只需将它放入style属性中！

$('.container').css('transform', 'rotateY(-40deg)');

- Todd

Answer 2

<div class="container remove"></div>

.container {
    width: 100%;
    height: 100%;
    transition: 0.5s;
    transform-style: preserve-3d; 
}

.add{
transfrom: rotateY(-40deg) translateZ(-404.747px);
}

.remove{
transform: rotateY(0deg) translateZ(-404.747px);
}

$('.container').removeclass('remove');
$('.container').addclass('add');

- Sathish

---

感谢您的回答，我发现'translateZ（-404.747px）'不会再次生效，如果我使用$（'.container'）.css（'transform'，'rotateY（-40deg）translateZ（-404.747px）'）; 真正的问题是rotateY和translateZ的顺序会产生不同的结果。所以我交换了这两个属性，问题得到解决。 - keben hu

@kebenhu，请将您的解决方案作为答案提供。 - try-catch-finally