2024-C1230565/mondai4.html at main - koekiInfoDesign/2024-C1230565

Fork: 0

koekiInfoDesign / 2024-C1230565

Find file

Newer

Older

2024-C1230565 / mondai4.html

Kato Yudai on 27 Jun 1 KB Update mondai4.html

Raw Blame History

<!DOCTYPE html>
<head>
  <title>CSS Transform の使い方</title>
  <link rel="stylesheet" href="mondai4.css">
</head>
<body>

  <h1>CSS3: transform の使い方</h1>
  <p>CSSの transformプロパティを使うと、要素を回転、拡大・縮小、移動、傾けるなどの視覚的な変形ができます。</p>
  <p>下記は主な使い方の例です。各ボックスにマウスを乗せて変化を見てみましょう。</p>

  <section>
    <h2>例1: 回転（rotate）</h2>
    <p>transform: rotate(15deg);→ 要素を15度回転します。</p>
    <div class="box rotate">回転</div>
  </section>

  <section>
    <h2>例2: 拡大縮小（scale）</h2>
    <p>transform: scale(1.2); → 要素を1.2倍に拡大します。</p>
    <div class="box scale">拡大</div>
  </section>

  <section>
    <h2>例3: 移動（translate）</h2>
    <p>transform: translateX(30px); → 要素を右へ30ピクセル移動します。</p>
    <div class="box translate">移動</div>
  </section>

  <section>
    <h2>例4: 傾斜（skew）</h2>
    <p>transform: skewX(20deg); → 要素を20度傾けます。</p>
    <div class="box skew">傾ける</div>
  </section>

  

</body>
</html>