menu
menu

transform【CSS3リファレンス】 | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook4
  • はてなブックマーク3
  • Google+3
  • Pocket0
  • Twitter0

transform【CSS3リファレンス】

  • CSS

transform

こんにちは(・∀・)

 CSS3で新しく追加されたプロパティをご紹介します。今回ご紹介するCSSプロパティはtransformです。

概要

 要素を移動・回転・拡大縮小・傾斜させるプロパティです。初期値の基準点は要素の中心50%, 50%ですが、transform-originで変更できます。値は半角スペースで区切って複数の関数を指定できます。関数の実行は先に記述されている物から順番に実行されます、順序によって表示される内容が変わる事もあります。transformプロパティで要素の位置やサイズを変更してもpositionで相対配置している場合と同様に前後の要素の配置には影響を与える事はありません。



.sample {
	transform: translate(100px, 100px) scale(1.5, 1.5) rotate(45deg);
}
適用要素

 ブロックレベル要素・インライン要素

指定できる値
translate(右への移動距離, 下への移動距離)
移動させる距離を数値+単位で指定します。2つ目の値を省略すると下方向への変化はなしに指定された事となります。
translateX(右への移動距離)
右方向へ移動する距離を数値+単位で指定します。
translateY(下への移動距離)
下方向へ移動する距離を数値+単位で指定します。
rotate(角度)
回転させる角度を指定します。単位はdeg(角度)、rad(ラジアン)などが指定できます。
scale(横の倍率, 縦の倍率)
拡大縮小させる倍率を数値(単位なし)で横方向・縦方向の順にカンマで区切って指定します。2つ目の値が省略されるとその倍率が縦横両方に適用されます。
scaleX(横の倍率)
横方向に拡大縮小させる倍率を数値(単位なし)で指定します。
scaleY(縦の倍率)
縦方向に拡大縮小させる倍率を数値(単位なし)で指定します。
skew(横の角度, 縦の角度)
傾斜させる角度を横方向・縦方向の順にカンマで区切って指定します。単位はdeg(角度)、rad(ラジアン)で指定します。2つ目の値を省略すると縦方向への変化はなしに指定された事となります。
skewX(横の角度)
横方向に傾斜させる角度を指定します。単位はdeg(角度)、rad(ラジアン)で指定します。
skewY(縦の角度)
縦方向に傾斜させる角度を指定します。単位はdeg(角度)、rad(ラジアン)で指定します。
none
移動、回転、拡大縮小、傾斜しない状態に指定します。
初期値

 none

サンプルデモ

サンプルデモ

HTML

<p class="demo">サンプルデモ</p>
CSS

.demo {
	width: 50px;
	height: 50px;
	transform: translate(100px, 50px) scale(1.5, 1.5) rotate(45deg);
 }
  • カテゴリー:CSS
  • facebook4
  • はてなブックマーク3
  • Google+3
  • Pocket0
  • Twitter0