将多个转换值添加到CSS中的一个元素

Question

我有一个元素，可以根据页面滚动使用transform transform3d对其施加视差效果

一些具有视差效果的元素已应用阴影，我还在其上的悬停上添加了translateY（）元素以实现高程效果。

@mixin shadow-1 {
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    &:hover {
        box-shadow: 0 3px 6px rgba(0,0,0,0.16);
        -webkit-transform: translateY(-5px);
        *         -moz-transform: translateY(-5px);
        *         transform: translateY(-5px);
    }
}

显然，它不起作用，因为您一次只能对每个元素进行1次转换。

有什么方法可以在现有的转换值上加上+ X px？

我无法连接这2个，因为并非所有视差元素都具有阴影，并且并非所有具有阴影的元素都具有视差效果。

现在，只有没有视差的元素才能正常工作（一次仅一次变换）