Добавление нескольких значений преобразования в один элемент в CSS - PullRequest
Новая
       18

Добавление нескольких значений преобразования в один элемент в CSS

0 голосов
/ 16 января 2019

У меня есть элемент, к которому применяется эффект параллакса с использованием transform translate3d в зависимости от прокрутки страницы

К некоторым элементам с эффектами параллакса применены тени, к которым я также добавляю элемент 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, поскольку не все элементы параллакса будут иметь тень на нем, и не все элементы с тенью будут иметь эффект параллакса.

В настоящее время только элементы без параллакса работают как предполагалось (только одно преобразование за раз)

...