
CSSでトランスフォーム:変形処理「transform」の基礎
エ・ビスコム・テック・ラボ
2009-02-17 15:52:01
トランスフォームファンクション
CSSのトランスフォームでは回転以外の変形処理を適用することもできる。回転を適用するときはtransformプロパティの値を「rotate()」と指定したが、この「rotate()」はトランスフォームファンクションと呼ばれ、変形の種類ごとに次のように用意されている。
トランスフォームファンクション | 変形の種類 |
---|---|
rotate() | 回転 |
scale() | 拡大・縮小 |
skew() | スキュー(シアー) |
translate() | 移動 |
サンプル01に対して回転以外の変形処理を適用すると、それぞれ次のようになる。
拡大・縮小
拡大・縮小の処理を適用するには、scale()で倍率を指定する。たとえば、scale(0.5)と指定すると、2分の1の大きさに縮小することができる。このとき、文字サイズだけでなく、黄色いバーも縮小されることに注目してほしい。
div{ -webkit-transform: scale(0.5); -moz-transform: scale(0.5); }
※ブラウザで表示を確認する
また、scale(x,y)の形で記述すると、横方向と縦方向の倍率を別々に指定することも可能だ。たとえば、scale(0.5,2)と指定すると、横方向は2分の1に、縦方向は2倍に拡大・縮小して表示することができる。
div{ -webkit-transform: scale(0.5,2); -moz-transform: scale(0.5,2); }
※ブラウザで表示を確認する
folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
RPAがニガテなExcelをどう使う
-
データ活用を加速するエコシステム
-
下した決断は「ハイブリッドへ」
-
レガシーなインフラ設計を見直す
-
クラウドバックアップお悩み相談室
-
変化への対応はリアルタイム経営で
-
レポート:NWセキュリティの未来
-
どこまで可能?企業を究極の自動化
-
2020年代を勝ち抜くインフラ
-
働き方改革は身近な「改善」から
-
「脱レガシー」なくしてDXはない
-
分析されたデータを活用できるか?
-
新時代にはゼロトラストが不可欠
-
Why ワークプレース?
-
明治創業の鉄道企業がAWSに挑戦
-
DX成功の鍵はセキュリティにあり
-
講演レポ:ポスト2020時代の基盤
-
ビジネス成功の砦はここにあり!
-
隗より始めよ
-
ウルトラ帳票文化を乗り越える!
-
働き方、生産性を根底から底上げ!
-
働き方改革にモニターが有効なワケ
-
攻めと守りのクラウド活用とは!?
-
Office 365にもFWが必要?
-
AI活用が激変する新たなインフラ
-
特集:ポスト2020時代のCX再考
-
実現まで10年「ゼロトラスト」
-
サブスクモデルのSaaSで業務改善
-
特集:ビジネスを止めるな!
-
ITシステムは永久のβ版思考で
-
ビジネスの大きな転換点で勝者に!
-
意識してますか?PCの「信頼性」