web-dev-qa-db-ja.com

1つの要素に複数の変換宣言を適用するにはどうすればよいですか？

2つのクラスを持つ要素があります。1つは要素を360度回転する「rotate」と呼ばれ、もう1つは要素を通常のサイズの2倍にスケーリングする「doublesize」と呼ばれます。

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

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

.doublesize {
    transform: scale(1);
}

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

http://jsfiddle.net/Sbw8W/

クラスが互いのtransformプロパティをオーバーライドするため、これは機能しないと思いますか？

次のような1つのCSSルールでこれを簡単に行えることを知っています。

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

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

しかし、可能であれば、各クラスを他のクラスから個別に適用できるようにしたいと思います。

csscss3css-transforms
33
Ash

クラスが互いのtransformプロパティをオーバーライドするため、これは機能しないと思いますか？

正しい。これは、カスケードがどのように機能するかの副作用としての残念な制限です。

単一のtransform宣言で両方の関数を指定する必要があります。結合された変換用の新しいクラスを作成する代わりに、両方のクラスセレクターを単純にチェーンすることができます。

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

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

...しかし、ご覧のとおり、問題はセレクターではなくtransformプロパティにあります。

これは、各トランスフォームが 独自のプロパティ に昇格されたトランスフォームレベル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ルールは必要ありません。

42
BoltClock

複数のアニメーションを確実に結合できますが、CSSクラスを結合することはできません。最初の回答はこちらをご覧ください： 複数のcssアニメーションを1つの全体的なアニメーションに結合

最初の部分では、アニメーションとCSSをいくつかのパラメーター（遅延、継続時間）で組み合わせる方法を説明します。

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

確かに、最初にアニメーションを定義する必要があります。

4
enguerranws

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 + ')'
        });
    }
});

これが同じ問題に直面している他の読者に役立つことを願っています。

3
Mike Gledhill