menu
menu

キーワード検索

 

前月(8月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5 Tips】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 5-) 【実践でjQuery入門】jQueryで日時を表示
  6. ( 7↑) 【制作Tips】スマホサイト向け横にスクロールするナビゲーション
  7. ( 6↓) 【JavaScript Tips】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( -↑) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. ( 8↓) 【HTML5】HTML5・ページ作成の基本

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);
}
Result

サンプルデモ


関連リンク

CSS3リファレンス

  • カテゴリー:CSS