RSS
css3のtransformの実装サンプル
Cat: » WEBデザイン, cssやプログラミング
Day:4月 6, 2010
今更ですけど、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以下が対応してないので実用性はアレですね。。仕事では使いませんが、個人的には使うのでメモしておきました。
(( ∩ ))
γ”⌒ヽ/〉_/〉 コロコロー
ι’ゞ‐u(=ﾟдﾟ)σ (((●
猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー
猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー
猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー
●))) コロコロー
ーナマ猫ーナマ猫ーナマ猫ーナマ猫ーナマ猫ーナマ猫
ーナマ猫ーナマ猫ーナマ猫ーナマ猫ーナマ猫ーナマ猫
ーナマ猫ーナマ猫ーナマ猫ーナマ猫ーナマ猫ーナマ猫
コロコロー (((●
猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー
猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー
猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー
かと思いましたｗ
css3って凄いですね！ チャペの飼い主
＞チャペの飼い主さん
うおｗすごいｗｗ シロ
呼ばれたのかと思いましたｗ Mana
＞Manaさん
その発想なかったｗｗ シロ