CSS3 transform:scale(); で要素を拡大、縮小 まとめ
左側のロゴにマウスを合わせると変化します。
右ロゴにはアニメーション設定なし。
1. scale(数値)
-moz-transform: scale(0.4);
-webkit-transform:
scale(0.4);
2. scaleX(数値)
-moz-transform: scaleX(0.4);
-webkit-transform:
scaleX(0.4);
3. scaleY(数値)
-moz-transform: scaleY(0.4);
-webkit-transform:
scaleY(0.4);
4. scaleZ(数値)
-moz-transform: scaleZ(0.4);
-webkit-transform:
scaleZ(0.4);
5. scale3d(数値)
-moz-transform: scale3d(0.4,0.4,0.4);
-webkit-transform:
scale3d(0.4,0.4,0.4);
※webkit系ブラウザ(safari,googleChrome等)、moz系ブラウザ(firefox)で確認してください。