HTML + Javascriptで横長画像をずれ・重なりなく回転させる

タグ：javascript

CSSのtransform:rotateによって角度を設定するとテキストや画像などの要素を回転させることができる．しかしtransform:rotateには回転要素の縦横比が1:1でないときにレイアウト上の問題が発生する。横長の画像を回転させると、回転しても画像の位置が変わらないため他の要素との重なりが発生してしまう。逆に縦長の時は横にしても空白を詰めてくれないので不自然に隙間が空いてしまう。

もちろん静的なページならpaddingなどをあらかじめ調整しておけばよいのであまり問題にならない。しかし困るのはJavascriptでユーザ操作に応じて動的に画像を回転させるときである。

このときはpaddingをrotと同時に変更して適当に余白を入れてやればよい。
下のようにdegが90°か270°のときに(width - height) / 2 のpaddingを入れると横長画像であれば伸びる分の余白が入ってくれる。縦長なら逆に画像を寝かしたことによる隙間を詰めてくれる。

    function rot(){
      deg += 90;
      // class="rot" を全て回転させる
      var es = document.getElementsByClassName("rot");
      for(var i = 0; i < es.length; i++)
      {
        es[i].style.transform = "rotate(" + deg + "deg)";
        if(deg % 180 != 0){ // 90°、270°なら縦にpadding
          es[i].style.paddingTop = (es[i].width - es[i].height) / 2;
          es[i].style.paddingBottom =  (es[i].width - es[i].height)  / 2;
        }
        else{
          es[i].style.paddingTop = 0;
          es[i].style.paddingBottom = 0;
        }
      }
    };