
CSSでトランスフォーム:変形処理「transform」の基礎
エ・ビスコム・テック・ラボ
2009-02-17 15:52:01
スキュー(シアー)
スキュー(シアー)の処理を適用するには、skew()で角度を指定する。たとえば、skew(30deg)と指定すると次のようになる。
div{ -webkit-transform: skew(30deg); -moz-transform: skew(30deg); }
※ブラウザで表示を確認する
また、scale(x,y)の形で記述すると、横方向と縦方向の角度を別々に指定することも可能だ。たとえば、scale(30deg,0)と指定すると、横方向にだけ処理を適用することができる。
div{ -webkit-transform: skew(30deg,0); -moz-transform: skew(30deg,0); }
※ブラウザで表示を確認する
なお、Firefox 3.1(ベータ版)では、skew(30deg)と指定しても、skew(30deg,0)と指定したときと同じ表示になってしまう。
移動
translate()で距離を指定すると、要素の表示位置を移動させることができる。たとえば、translate(100px)と指定すると、黄色のバーが右に100ピクセル、下に100ピクセル移動する。
div{ -webkit-transform: translate(100px); -moz-transform: translate(100px); }
※ブラウザで表示を確認する
また、scale()やskew()と同じように、translate(x,y)の形で記述すると、横方向と縦方向の移動距離を別々に指定することもできる。たとえば、translate(100px,-100px)と指定すると、黄色のバーが右に100ピクセル、上に100ピクセル移動する。
div{ -webkit-transform: translate(100px,-100px); -moz-transform: translate(100px,-100px); }
※ブラウザで表示を確認する
なお、Firefox 3.1(ベータ版)では、translate(100px)と指定しても、translate(100px,0)と指定したときと同じ表示になってしまう。
次回は、transformプロパティの特徴についてより細かく見ていきたい。
folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
サブスクモデルのSaaSで業務改善
-
分析されたデータを活用できるか?
-
下した決断は「ハイブリッドへ」
-
RPAがニガテなExcelをどう使う
-
クラウドバックアップお悩み相談室
-
「データ」こそDXの主役
-
隗より始めよ
-
レガシーなインフラ設計を見直す
-
特集:ビジネスを止めるな!
-
データ活用を加速するエコシステム
-
ビジネス成功の砦はここにあり!
-
働き方改革は身近な「改善」から
-
働き方改革にモニターが有効なワケ
-
変化への対応はリアルタイム経営で
-
ウルトラ帳票文化を乗り越える!
-
講演レポ:ポスト2020時代の基盤
-
働き方、生産性を根底から底上げ!
-
攻めと守りのクラウド活用とは!?
-
特集:ポスト2020時代のCX再考
-
明治創業の鉄道企業がAWSに挑戦
-
AI活用が激変する新たなインフラ
-
意識してますか?PCの「信頼性」
-
2020年代を勝ち抜くインフラ
-
ITシステムは永久のβ版思考で
-
Why ワークプレース?
-
どこまで可能?企業を究極の自動化
-
ビジネスの大きな転換点で勝者に!