Как я могу применить несколько объявлений преобразования к одному элементу?

У меня есть элемент с двумя классами, один из которых называется "rotate", который будет вращать элемент на 360 градусов, а другой называется "doublelesize", который масштабирует элемент 2x его нормальный размер:

.rotate {
    transform: rotate(0deg);
}

.rotate:hover {
    transform: rotate(360deg);
}

.doublesize {
    transform: scale(1);
}

.doublesize:hover {
    transform: scale(2);
}

http://jsfiddle.net/Sbw8W/

Я предполагаю, что это не работает, потому что классы переопределяют друг друга transform свойство?

Я знаю, что я мог бы легко сделать это в одном правиле CSS, например:

.doublerotatesize {
    transform: scale(1) rotate(0deg);
}

.doublerotatesize:hover {
    transform: scale(2) rotate(360deg);
}

Но я хотел бы иметь возможность применять каждый класс отдельно от другого, если это возможно.

Ответы

Ответ 1

Я предполагаю, что это не работает, потому что классы переопределяют друг друга transform свойство?

Правильно. Это несчастливое ограничение как побочный эффект работы каскада.

Вам нужно будет указать обе функции в одном объявлении transform. Вы могли бы просто сгруппировать оба селектора классов вместе вместо создания нового класса для комбинированного преобразования:

.doublesize.rotate {
    -webkit-transform: scale(1) rotate(0deg);
}

.doublesize.rotate:hover {
    -webkit-transform: scale(2) rotate(360deg);
}

... но, как вы можете видеть, проблема заключается в свойстве transform, а не в селекторе.

Ожидается, что это будет исправлено в Transforms level 2, где каждое преобразование было доведено до собственного свойства, что позволило бы объединить преобразования просто, объявив их отдельно, как и любая другая комбинация свойств CSS. Это означает, что вы сможете просто сделать это:

/* Note that rotate: 0deg and scale: 1 are omitted
   as they're the initial values */

.rotate:hover {
    rotate: 360deg;
}

.doublesize:hover {
    scale: 2;
}

... и использовать каскад, а не препятствовать ему. Нет необходимости в специализированных именах классов или комбинированных правилах CSS.

Ответ 2

Вы можете объединить несколько анимаций, но не объединяя классы CSS. См. Первый ответ здесь: объединение нескольких анимаций css в одну общую анимацию

В первой части вам рассказывается, как объединить анимацию с CSS с некоторыми параметрами (задержка, продолжительность):

.outside.animate {
   -webkit-animation-delay: 0s, .5s, .5s;
   -webkit-animation-duration: 500ms, 1000ms, 1000ms;
   -webkit-animation-name: button-bounce, rotate, skyblue;
}

Конечно, сначала вам нужно определить свои анимации.

Ответ 3

Вы не можете сделать это, используя только CSS, но если вы не против использования какого-либо jQuery, вы можете связать этот эффект с помощью некоторого jQuery:

var $elem = $('.cssDropPinImage');
$({ deg: 0 }).animate({ deg: 359 }, {
    duration: 600,
    step: function (now) {
        var scale = (2 * now / 359);
        $elem.css({
            transform: 'rotate(' + now + 'deg) scale(' + scale + ')'
        });
    }
});

Надеюсь, это поможет другим читателям, столкнувшись с одной и той же проблемой.