今更ですけど、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);
[note]
-moz-transform-origin: *% *%;
-webkit-transform-origin: *% *%;
を追加して位置を変更する事も可能
[/note]
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以下が対応してないので実用性はアレですね。。仕事では使いませんが、個人的には使うのでメモしておきました。