css3のtransformの実装サンプル

スポンサーリンク

今更ですけど、css3のサンプル
をメモ代わりに記事にしておき
ます。使わないと思っていました
が、仕事以外で使うのでコピペ
用にメモ。

実装例をそのままコピペして使えば同様の変形が可能です。ブラウザはChromeとかFiirefox、Safariなどでご覧下さい。細かい対応状況は調べていません。数値は記事に収まり、且つ実装状態が分かるようにしています。見難かったらごめんなさい。webkit系とmoz系を一緒にしてます

デフォルト

デフォルトの状態
これが基準です

skew / 要素を曲げる

skewX(*deg)

-moz-transform: skewX(30deg);
-webkit-transform: skewX(30deg);

-moz-transform: skewX(30deg);
-webkit-transform: skewX(30deg);

skewX(-*deg)

-moz-transform: skewX(-30deg);
-webkit-transform: skewX(-30deg);

-moz-transform: skewX(-30deg);
-webkit-transform: skewX(-30deg);

skewY(*deg)

-moz-transform: skewY(5deg);
-webkit-transform: skewY(5deg)

-moz-transform: skewY(5deg);
-webkit-transform: skewY(5deg);

skewY(-*deg)

-moz-transform: skewY(-5deg);
-webkit-transform: skewY(-5deg);

-moz-transform: skewY(-5deg);
-webkit-transform: skewY(-5deg);

rotate / 要素を回転

rotate(*deg)

-moz-transform: rotate(185deg);
-webkit-transform: rotate(185deg);

-moz-transform: rotate(185deg);
-webkit-transform: rotate(185deg);

rotate(-*deg)

-moz-transform: rotate(-185deg);
-webkit-transform: rotate(-185deg);

-moz-transform: rotate(-185deg);
-webkit-transform: rotate(-185deg);


-moz-transform-origin: *% *%;
-webkit-transform-origin: *% *%;
を追加して位置を変更する事も可能

scale / 拡大縮小

scale(0.*) / 縮小

-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);

-webkit-transform: scale(0.5);
-moz-transform: scale(0.5); 

scale(*) / 拡大

-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);

-webkit-transform: scale(1.3);
-moz-transform: scale(1.3); 

translate / 移動

translate(*px)

-webkit-transform: translate(50px);
-moz-transform: translate(50px);

-webkit-transform: translate(50px);
-moz-transform: translate(50px); 

translate(-*px)

-webkit-transform: translate(-50px);
-moz-transform: translate(-50px);

-webkit-transform: translate(-50px);
-moz-transform: translate(-50px); 

変形楽しいですけど使いどころが思い浮かばないのとIE8以下が対応してないので実用性はアレですね。。仕事では使いませんが、個人的には使うのでメモしておきました。

URL :
TRB :

Comments & Trackbacks (5)

  1. チャペの飼い主

          (( ∩ ))
            γ”⌒ヽ/〉_/〉   コロコロー
           ι’ゞ‐u(=゚д゚)σ   (((●
      猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー
      猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー
     猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー
       ●))) コロコロー
      ーナマ猫ーナマ猫ーナマ猫ーナマ猫ーナマ猫ーナマ猫
       ーナマ猫ーナマ猫ーナマ猫ーナマ猫ーナマ猫ーナマ猫
       ーナマ猫ーナマ猫ーナマ猫ーナマ猫ーナマ猫ーナマ猫
                    コロコロー (((●
      猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー
      猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー
     猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー

    かと思いましたw
    css3って凄いですね!

  2. シロ

    >チャペの飼い主さん

    うおwすごいww

  3. Mana

    呼ばれたのかと思いましたw

  4. シロ

    >Manaさん

    その発想なかったww

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services