web-dev-qa-db-fra.com

Comment puis-je appliquer plusieurs déclarations de transformation à un élément?

J'ai un élément avec deux classes, une appelée "rotation" qui fera pivoter l'élément à 360 degrés et une autre appelée "double taille" qui mettra à l'échelle l'élément 2x sa taille normale:

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

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

.doublesize {
    transform: scale(1);
}

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

http://jsfiddle.net/Sbw8W/

Je suppose que cela ne fonctionne pas parce que les classes se substituent la propriété transform de l'autre?

Je sais que je pourrais facilement le faire dans une règle CSS comme:

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

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

Mais j'aimerais pouvoir appliquer chaque classe séparément de l'autre si c'est possible.

csscss3css-transforms
33
Ash

Je suppose que cela ne fonctionne pas parce que les classes se substituent la propriété transform de l'autre?

Correct. Il s'agit d'une limitation malheureuse comme effet secondaire du fonctionnement de la cascade.

Vous devrez spécifier les deux fonctions dans une seule déclaration transform. Vous pouvez simplement enchaîner les deux sélecteurs de classe au lieu de créer une nouvelle classe pour une transformation combinée:

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

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

... mais comme vous pouvez le voir, le problème réside dans la propriété transform plutôt que dans le sélecteur.

Cela devrait être corrigé dans Transforms niveau 2, où chaque transformation a été promue en sa propre propriété , ce qui vous permettrait de combiner des transformations simplement en les déclarant séparément comme vous le feriez pour toute autre combinaison de propriétés CSS. . Cela signifie que vous pourriez simplement faire ceci:

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

.rotate:hover {
    rotate: 360deg;
}

.doublesize:hover {
    scale: 2;
}

... et profitez de la cascade plutôt que d'être gêné par elle. Pas besoin de noms de classe spécialisés ou de règles CSS combinées.

42
BoltClock

Vous pouvez sûrement combiner plusieurs animations, mais pas en combinant des classes CSS. Voir la première réponse ici: combinant plusieurs animations css en une seule animation globale

La première partie vous explique comment combiner l'animation avec CSS avec quelques paramètres (délai, durée):

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

Pour sûr, vous devez d'abord définir vos animations.

4
enguerranws

Vous ne pouvez pas le faire en utilisant simplement CSS, mais si cela ne vous dérange pas d'utiliser du jQuery, vous pouvez attacher cet effet en utilisant du 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 + ')'
        });
    }
});

J'espère que cela aide d'autres lecteurs, confrontés au même problème.

3
Mike Gledhill