CSS3 拡大,縮小,移動,変形 transitionプロパティのまとめ
ロゴにマウスを合わせると変化します。右ロゴにはtransitionを設定
.right img{
-webkit-transition: all 0.6s linear 0;
}
1. skew : 要素を曲げる
-moz-transform: skewX(25deg);
-webkit-transform:
skewX(25deg);
-moz-transform: skewX(-25deg);
--webkit-transform:
skewX(-25deg);
-moz-transform: skewY(10deg);
--webkit-transform:
skewY(10deg);
-moz-transform: skewY(-10deg);
--webkit-transform:
skewY(-10deg);
2. rotate : 要素を回転
-moz-transform: rotate(160deg);
--webkit-transform:
rotate(160deg);
-moz-transform: rotate(-160deg);
--webkit-transform:
rotate(-160deg);
3. scale : 拡大縮小
-moz-transform: scale(0.4);
--webkit-transform:
scale(0.4);
-moz-transform: scale(1.4);
--webkit-transform:
scale(1.4);
4. scale : 移動
-moz-transform: translate(30px);
--webkit-transform:
translate(30px);
-moz-transform: translate(-30px);
--webkit-transform:
translate(-30px);
※webkit系ブラウザ(safari,googleChrome等)、moz系ブラウザ(firefox)で確認してください。