cssのzoomプロパティをfirefoxに適用させたい

diary


あくまで対象ブラウザがIE8以上、FireFox,Chromeの場合の手段ですが。

cssのzoomプロパティって、Chromeでも有効なんですね。

IEの独自実装かと思っていました。

背景画像を敷いたdiv要素に



zoom: 0.75;

と指定すると、Chromeでも対象要素が75%に縮小されて表示されました。

しかし残念ながらFirefoxでは無効のようで、100%の大きさでブラウザに表示されました。

となると頼りになるのはcss3ということになります。

私の場合以下のように指定してあげることでfirefoxでもzoom: 0.75;と同様の効果を得ることができました。



zoom: 0.75;



    

  • moz-transform:
    • 

scale(0.75,0.75)

translate(-23px,-23px);

２行目〜４行目は,firefoxで、transformプロパティのscale(拡大縮小)をx方向に0.75倍、y方向に0.75倍し、

translate( 移動)をx方向に-23px,y方向に-23pxしてください、という指定です。

このようにcss3では「拡大・縮小する」「移動する」と二つの挙動を同時に指定することができますが、

各指定間はスペースまたは改行でつなぎます（カンマでない点に注意）。

css3はcanvasと違い、座標の始点(0,0)はエリアの中心になりますので、transformすると元の画像の中心に向かって変形します。

（canvasは左上が始点となります）

そのためtranslate(移動)で左上に戻してあげる必要があるというわけです。