study-note

5. コンテンツを変形するCSS

目次

• 回転のプロパティ
• 伸縮のプロパティ
• 移動のプロパティ

回転のプロパティ

1. rotateプロパティ

  #child{
    rotate: 30deg;
  }

• 回転する
• 値：角度

1. transformプロパティ

  #child{
    transform: rotate(03deg);
  }

• 変形のプロパティ
• transform-originプロパティ：中心位置の変更

伸縮のプロパティ

1. scaleプロパティ

  #child{
    scale: 2 1;
  }

• 伸縮する
• 値：倍率（単位なし）、%値（-で反転）
• 値が2つ：横の値 縦の値

1. transformプロパティ

  #child{
    transform: scale(2, 1);
  }

• 変形のプロパティ
• 値：倍率（単位なし）、%値（-で反転）
• 値が2つ：横の値 縦の値
• transform-originプロパティ：中心位置の変更

移動のプロパティ

1. translateプロパティ

  #child{
    translate: 100px 100px;
  }

• 移動する
• 値：距離（px等）、%値
• 値が1つ：横方向に移動
• 値が2つ：横の値 縦の値

1. transformプロパティ

  #child{
    transform: translate(100px, 100px);
  }

• 変形のプロパティ
• 値：距離（px等）、%値
• 値が1つ：横方向に移動
• 値が2つ：横の値 縦の値
• skew()：歪みの値
  • 値が1つ：横方向の歪み
  • 値が2つ：横方向 縦方向の歪み

→6. アニメーションのCSS