HTML5とCSS3の辞典[やさしいタグ入門辞書]

  • a
  • a
  • a

HTML5とCSS3の辞典　＞　移動・回転・拡大・縮小　＞　transform

transform

ブロックの変化

.item_01 {
-webkit-transform: rotate(13deg) scale(0.727) skew(-28deg) translate(2px);
-moz-transform: rotate(13deg) scale(0.727) skew(-28deg) translate(2px);
-o-transform: rotate(13deg) scale(0.727) skew(-28deg) translate(2px);
background-color: #0099FF;
height: 50px;
width: 200px;
text-align: center;
line-height: 50px;
}

<div class="item_01">SAMPLE TEXT</div>
SAMPLE TEXT
「transform」は、ボックスの変化を自由自在に行えます。
例題では、CSS3.0 MAKERさんを使用して、作っています。
実際に自分で制作しようとすると非常に難しい点がありますので、こういうサービスを利用して作るのが理想的です。
JavaScriptと併用すれば、Flashのような動的な動きを持たせることもできます。

「translate」は、(右への移動,下への移動)。
「translateX」は、(右への移動)。
「translateY」は、(下への移動)。
「rotate」は、角度（単位はdeg）。
「scale」は、(横の倍率,縦の倍率)。
「scaleX」は、(横の倍率)。
「scaleY」は、(縦の倍率)。
「skew」は、(横の角度,縦の角度)。
「skewX」は、(横の角度)。
「skewY」は、(縦の角度)。
「none」は、何もしない状態。

  • 基本要素
    • html（ルート）
    • head（HTML情報）
    • body（本文）
    • title（タイトル）
    • meta（メタ情報）
    • base（基準URL）
    • link（外部ファイル）
    • style（CSS）
    • script（スクリプト）
  • セクション
    • section（セクション）
    • article（完結セクション）
    • aside（メイン外セクション）
    • nav（ナビセクション）
    • header（ヘッダ）
    • footer（フッタ）
  • 見出し
    • h1～h6（見出し）
    • hgroup（見出しグループ）
  • グループ
    • div（汎用ブロック）
    • span（汎用要素）
    • p（段落）
    • ul（リスト）
    • ol（番号リスト）
    • dl（用語リスト）
    • blockquote（引用文）
    • pre（整形テキスト）
    • figre（図画）
    • hr（ライン）
  • テキスト
    • a（リンク）
    • q（引用フレーズ）
    • cite（引用元URL）
    • dfn（定義対象）
    • abbr（略語）
    • time（時間）
    • adress（住所）
    • strong（重要性高い強調）
    • em（強調）
    • mark（ハイライト）
    • small（小さめ文字）
    • b（太文字）
    • i（イタリック文字）
    • sup（上付き文字）
    • sub（下付き文字）
    • code（コード文字列）
    • samp（PC出力文字）
    • kbd（ユーザー入力文字）
    • br（改行）
    • wbr（改行可能位置）
    • bdo（文字表記方向）
    • ruby（ルビを振る）
    • ins（追加テキスト）
    • del（削除テキスト）
  • コンテンツの組み込み
    • img（画像）
    • audio（音声）
    • video（動画）
    • map（イメージマップ）
    • object（汎用組込み）
    • iframe（インラインフレーム）
  • テーブル
    • table（テーブル関連）
  • フォーム
    • form（フォーム）
    • input（入力・選択）
    • textarea（テキストエリア）
    • select（セレクトメニュー）
    • datalist（入力候補選択肢）
    • fieldset（部品のグループ化）
    • label（部品項目名）
    • output（計算結果）
    • keygen（公開鍵生成）
    • progress（プログレスバー）
    • meter（メーター）
  • インタラクティブ
    • details（クリック開閉）
    • menu（命令メニュー）
    • command（命令コマンド）
アンダータグ
  • 属性一致
    • 要素[属性^="開始文字"]
    • 要素[属性$="終了文字"]
    • 要素[属性*="含む文字"]
  • 擬似クラス
    • 要素:root（ルート指定）
    • 要素:nth-child（一定おき）
    • 要素:nth-of-type（一定おき）
    • 要素:nth-last-child（後から一定おき）
    • 要素:first-of-type（最初の同一要素）
    • 要素:last-of-type（最後の同一要素）
    • 要素:last-child（最後の要素）
    • 要素:only-child（唯一の子要素）
    • 要素:only-of-type（一つの子要素）
    • 要素:empty（子要素なし要素）
    • 要素:target（ターゲット先要素）
    • 要素:disabled（disabled属性の要素）
    • 要素:enabled（disabled属性でない要素）
    • 要素:checked（checked属性の要素）
    • 要素:not（該当しない要素）
  • 擬似要素
    • 要素::first-line（最初の行）
    • 要素::first-letter（最初の文字）
    • 要素::before（直前に文字を挿入）
    • 要素::after（直後に文字を挿入）
    • 要素::selection（選択範囲）
  • 色・透明化
    • rgba（RGB色指定と透明化）
    • hsla（HSL色指定と透明化）
    • liner-gradient（グラデーション）
    • opacity（透明度）
  • メディア
    • メディア分岐
  • 背景
    • background（背景複数指定）
    • background-clip（線と背景の関係）
    • background-origin（背景の開始位置）
    • background-size（背景のサイズ）
  • テキスト
    • font-face（WEBフォント）
    • text-shadow（テキストに影）
    • text-overflow（超過文字の処理）
    • word-wrap（自動改行）
  • ボーダー
    • border-radius（角丸の指定）
  • ボックス
    • box-shadow（ボックスに影）
    • box-sizing（幅にボーダーを含むか）
    • outline-offset（アウトラインの間）
    • resize（コメント欄の幅を調節）
  • カラムレイアウト
    • column-count（カラムの数を指定）
    • column-width（各カラムの横幅）
    • column-gap（カラムとカラムの間隔）
    • column-rule-color（カラム境界線の色）
    • column-rule-style（カラムの境界線の線種）
    • column-rule-width（カラムの境界線の幅）
    • column-rule（カラムの一括指定）
  • ボックスの並び
    • display（ボックスにする）
    • box-orient（ボックスの並べ方）
    • box-direction（ボックスを逆から並べる）
    • box-original-goup（各ボックスの並び）
    • box-align（ボックスの縦揃え）
    • box-pack（ボックスの横揃え）
    • box-flex（各ボックスの比率）
  • 移動・回転・拡大・縮小
    • transform（ブロックの変化）
    • transform-origin（ブロックの標準点）
  • 動的な変化
    • transition-property（スムーズに変化）
    • transition-duration（変化する時間）
    • transition-timing-function（速度の変化）
    • transition-delay（変化開始）
    • transition（変化の一括指定）
  • アニメーション
    • animation-name（アニメの名前）
    • animation-duration（遅れて再生）
    • animation-timing-function（変化方法）
    • animation-interation-count（速度の変化）
    • animation-direction（逆から再生）
    • animation-delay（遅れて再生）
    • animation（アニメの一括指定）
アンダータグ
Copyright © 2012 Hikaru Koishi. All Rights Reserved.

Thanks you guys for this site was born. Thank you.
Asakura MH, Dr.Sato, Ns.Harano, Ns.Kumano, Rico, 69x, B'z, my Fammiry and my Friends.