CSS Transformsについてのメモ
既に色々なデモページが作られていたり、実用されていたりするCSS Transformsですが、ちゃんと理解したかったので調べてみました。 まだそんなに自信はありませんが、以前よりは理解できた気がします。 というわけなので、自分が分かる範囲で説明してみたいと思います。 CSS Transformsは2Dと3Dとで別になっていますが、将来的には SVG Transforms と合わせて一つの仕様になるそうです。 今はまだ別々なので、それぞれにリンクをしておきます。括弧内は現時点での最新の日付です。 WD: CSS 2D Transforms（2011/12/15）ED: CSS Transforms（2011/11/28）WD: CSS 3D Transforms Module Level 3（2009/03/20）ED: CSS 3D Transforms（2011/03/21）新しくなった
css3のtransformの実装サンプル
今更ですけど、css3のサンプル をメモ代わりに記事にしておき ます。使わないと思っていました が、仕事以外で使うのでコピペ 用にメモ。 実装例をそのままコピペして使えば同様の変形が可能です。ブラウザはChromeとかFiirefox、Safariなどでご覧下さい。細かい対応状況は調べていません。数値は記事に収まり、且つ実装状態が分かるようにしています。見難かったらごめんなさい。webkit系とmoz系を一緒にしてます デフォルトデフォルトの状態 これが基準ですskew / 要素を曲げるskewX(*deg)-moz-transform: skewX(30deg); -webkit-transform: skewX(30deg);
webkit-transform を使ってみた
実際にSafari 3.1で見たところ text-shadowはFirefox 3.1で対応要諦ですので時間が解決してくれますが、CSSで要素を回転してくれるプロパティはいつ対応になるのでしょうか。 今回、Webkitの独自実装のwebkit-transformを使ってみました。 webkit-transform はCSSを使ってコンテンツを回転・縮小・拡大などが出来るようになります。 それだけでなく、実はTweenみたいな簡単なエフェクトをつけることが出来ます!! 上のようにコンテンツを傾けるのは -webkit-transform: rotate(-12deg); このように指定しました。 text-shadowも問題なく適用されています。 今回は基点を中央にしたため特に指定はしていません（デフォルトが中心） 主なプロパティは scale(x,y) 拡大 translate(x,y)
HugeDomains.com
Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
