[css] transformを複数使用する時に気をつけるポイント

cssが便利すぎて、WEBエンジニアでanimationまで使いこなせないと、とんでもないメモリ、バッテリー食いのアプリケーションが出来上がってしまいます。 ネイティブcssでなんでも出来るようになると、もはや、プログラム構造体のMVCのVの多くの部分を任せてしまえるモジュールにもなりますからね。 そんな中、今回も、僕の陥った落とし穴をご紹介します。

トラブル内容

今回は、撮影した写真の一覧表示をするサービス構築で、写真アップロード時に、回転処理を行い、それをcssのtransform-rotateで実現していました。 ここに、パソコンなどでそれぞれの写真をマウスオーバーさせた時に、写真が拡大して、hover効果を表現した時に、 回転(rotate)の値が消えてしまうという事象です。

See the Pen Transform-test-1 by YugetaKoji (@geta1972) on CodePen.

上記のように、rotateで回転させた画像にマウスを乗せると、rotate値が無くなってしまうのが分かると思います。

原因

これは、"transform:rotate() scale() translate();"が1セットの命令なのに対し、それぞれ個別にセットした時に、他の値がクリアされてしまうという挙動で発生するようです。 毎回これらの値をセットすればいいのですが、rotate値は条件によって変わるので、その個数分cssをセットするのは、いささか無駄な記述が増えてしまうだけです。 今の時点での結論としては、階層要素毎に、rotateとscale（translateなど）を振り分けてセットするしかないでしょう。 ようするに、階層で１つのエレメントを表現して、それぞれ１つずつ値を変えるようにするしかないですね。

結論サンプル

See the Pen Transform-test-2 by YugetaKoji (@geta1972) on CodePen.

上記のように親要素のdivタグにrotateを実行させて、imgタグで拡大処理を行うというやり方が間違いなさそうです。 ここでの注意点は、階層グループになる要素すべてのサイズや位置を同じにしておく必要があります。 あくまでimgタグが主体であれば、回転の中心点や、拡大の基点など、少しでも狂ってしまうとおかしくなりますからね。