<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      min-height: auto;
    }

    /* Stepper Controls */
    .controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 520px;
      margin-bottom: 6px;
    }
    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      line-height: 1.2;
      transition: background-color 0.15s ease;
    }
    .btn:hover { background: #e2e8f0; }
    .step-tabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 4px;
    }
    .step-tab {
      padding: 4px 7px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      color: #64748b;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s ease;
    }
    .step-tab.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    /* Main Comparison Layout */
    .proof-container {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: stretch;
      gap: 8px;
      width: 100%;
      max-width: 520px;
    }

    .proof-box {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 6px 4px 6px;
    }

    .box-title {
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 2px;
    }
    .box-title.orig { color: #2563eb; }
    .box-title.trans { color: #7c3aed; }

    /* SVG Coordinates */
    .grid-svg {
      width: 100%;
      max-width: 210px;
      height: auto;
      display: block;
    }

    /* Math Formula Section */
    .calc-box {
      margin-top: 2px;
      font-size: 11px;
      font-weight: 600;
      text-align: center;
      line-height: 1.35;
      color: #334155;
      min-height: 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .calc-highlight {
      font-size: 11.5px;
      font-weight: 700;
      color: #0f172a;
    }

    /* Result Banner */
    .result-badge {
      margin-top: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 4px 12px;
      border-radius: 20px;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      color: #16a34a;
      font-weight: 700;
      font-size: 12px;
      transition: opacity 0.25s ease;
    }
    .result-badge.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    /* Step display classes */
    .step-el {
      transition: opacity 0.25s ease;
    }
    .dimmed { opacity: 0; pointer-events: none; }

    /* Responsive adjustments for narrow screens */
    @media (max-width: 460px) {
      .proof-container {
        flex-direction: column;
        max-width: 280px;
        gap: 6px;
      }
      .controls { gap: 3px; margin-bottom: 4px; }
      .btn { padding: 3px 6px; font-size: 11px; }
      .step-tab { padding: 3px 5px; font-size: 10px; }
      .grid-svg { max-width: 190px; }
      .calc-box { min-height: 28px; font-size: 10.5px; }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn" id="prevBtn" aria-label="Previous step">‹</button>
    <div class="step-tabs">
      <button class="step-tab active" data-step="0">1. Segments</button>
      <button class="step-tab" data-step="1">2. Rise &amp; Run</button>
      <button class="step-tab" data-step="2">3. Distance</button>
      <button class="step-tab" data-step="3">4. Preserved</button>
    </div>
    <button class="btn" id="nextBtn" aria-label="Next step">›</button>
    <button class="btn" id="playBtn" aria-label="Play/Pause">⏸</button>
  </div>

  
  <div class="proof-container">
    
    
    <div class="proof-box">
      <div class="box-title orig">Original AB</div>
      <svg class="grid-svg" viewBox="0 0 215 160">
        <defs>
          <pattern id="grid1" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#e2e8f0" stroke-width="1" />
          </pattern>
        </defs>
        <rect x="22" y="8" width="160" height="135" fill="url(#grid1)" stroke="#cbd5e1" stroke-width="1"/>
        
        
        <text x="19" y="146" font-size="9.5" fill="#94a3b8" text-anchor="end">0</text>
        <text x="42" y="154" font-size="9.5" fill="#94a3b8" text-anchor="middle">1</text>
        <text x="102" y="154" font-size="9.5" fill="#94a3b8" text-anchor="middle">4</text>
        <text x="19" y="107" font-size="9.5" fill="#94a3b8" text-anchor="end">2</text>
        <text x="19" y="27" font-size="9.5" fill="#94a3b8" text-anchor="end">6</text>

        
        <g id="legsA" class="step-el dimmed">
          <line x1="42" y1="104" x2="102" y2="104" stroke="#d97706" stroke-width="2" stroke-dasharray="3,3" />
          <line x1="102" y1="104" x2="102" y2="24" stroke="#059669" stroke-width="2" stroke-dasharray="3,3" />
          <path d="M 94 104 L 94 96 L 102 96" fill="none" stroke="#94a3b8" stroke-width="1.2" />
          <text x="72" y="118" font-size="10.5" font-weight="700" fill="#d97706" text-anchor="middle">run = 3</text>
          <text x="107" y="68" font-size="10.5" font-weight="700" fill="#059669" text-anchor="start">rise = 4</text>
        </g>

        
        <line id="segA" x1="42" y1="104" x2="102" y2="24" stroke="#2563eb" stroke-width="3" stroke-linecap="round" />

        
        <g id="distLabelA" class="step-el dimmed">
          <rect x="54" y="54" width="32" height="16" rx="4" fill="#eff6ff" stroke="#2563eb" stroke-width="1"/>
          <text x="70" y="66" font-size="10.5" font-weight="700" fill="#2563eb" text-anchor="middle">d = 5</text>
        </g>

        
        <circle cx="42" cy="104" r="4" fill="#2563eb" />
        <text x="39" y="96" font-size="10" font-weight="700" fill="#1e2945" text-anchor="end">A(1,2)</text>
        <circle cx="102" cy="24" r="4" fill="#2563eb" />
        <text x="102" y="16" font-size="10" font-weight="700" fill="#1e2945" text-anchor="middle">B(4,6)</text>
      </svg>

      <div class="calc-box">
        <div id="calcA1" class="step-el dimmed">d = √(3² + 4²)</div>
        <div id="calcA2" class="step-el dimmed calc-highlight">d = √(9 + 16) = 5</div>
      </div>
    </div>

    
    <div class="proof-box">
      <div class="box-title trans">Image A'B'</div>
      <svg class="grid-svg" viewBox="0 0 215 160">
        <defs>
          <pattern id="grid2" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#e2e8f0" stroke-width="1" />
          </pattern>
        </defs>
        <rect x="18" y="8" width="150" height="135" fill="url(#grid2)" stroke="#cbd5e1" stroke-width="1"/>
        
        
        <text x="15" y="146" font-size="9.5" fill="#94a3b8" text-anchor="end">0</text>
        <text x="94" y="154" font-size="9.5" fill="#94a3b8" text-anchor="middle">4</text>
        <text x="154" y="154" font-size="9.5" fill="#94a3b8" text-anchor="middle">7</text>
        <text x="15" y="127" font-size="9.5" fill="#94a3b8" text-anchor="end">1</text>
        <text x="15" y="47" font-size="9.5" fill="#94a3b8" text-anchor="end">5</text>

        
        <g id="legsB" class="step-el dimmed">
          <line x1="94" y1="124" x2="154" y2="124" stroke="#d97706" stroke-width="2" stroke-dasharray="3,3" />
          <line x1="154" y1="124" x2="154" y2="44" stroke="#059669" stroke-width="2" stroke-dasharray="3,3" />
          <path d="M 146 124 L 146 116 L 154 116" fill="none" stroke="#94a3b8" stroke-width="1.2" />
          <text x="124" y="138" font-size="10.5" font-weight="700" fill="#d97706" text-anchor="middle">run = 3</text>
          <text x="158" y="88" font-size="10.5" font-weight="700" fill="#059669" text-anchor="start">rise = 4</text>
        </g>

        
        <line id="segB" x1="94" y1="124" x2="154" y2="44" stroke="#7c3aed" stroke-width="3" stroke-linecap="round" />

        
        <g id="distLabelB" class="step-el dimmed">
          <rect x="106" y="74" width="34" height="16" rx="4" fill="#faf5ff" stroke="#7c3aed" stroke-width="1"/>
          <text x="123" y="86" font-size="10.5" font-weight="700" fill="#7c3aed" text-anchor="middle">d' = 5</text>
        </g>

        
        <circle cx="94" cy="124" r="4" fill="#7c3aed" />
        <text x="90" y="116" font-size="10" font-weight="700" fill="#1e2945" text-anchor="end">A'(4,1)</text>
        <circle cx="154" cy="44" r="4" fill="#7c3aed" />
        <text x="154" y="36" font-size="10" font-weight="700" fill="#1e2945" text-anchor="middle">B'(7,5)</text>
      </svg>

      <div class="calc-box">
        <div id="calcB1" class="step-el dimmed">d' = √(3² + 4²)</div>
        <div id="calcB2" class="step-el dimmed calc-highlight">d' = √(9 + 16) = 5</div>
      </div>
    </div>

  </div>

  
  <div id="resultBadge" class="result-badge hidden">
    <span>✓</span>
    <span>d = d' = 5 (Distance Preserved)</span>
  </div>

  <script>
    const $ = (sel) => document.querySelector(sel);
    const $$ = (sel) => document.querySelectorAll(sel);
    const onTap = (el, fn) => {
      if (!el) return;
      el.addEventListener('click', fn);
    };

    let currentStep = 0;
    const totalSteps = 4;
    let autoPlayInterval = null;

    const tabs = $$('.step-tab');
    const legsA = $('#legsA');
    const legsB = $('#legsB');
    const distA = $('#distLabelA');
    const distB = $('#distLabelB');
    const calcA1 = $('#calcA1');
    const calcA2 = $('#calcA2');
    const calcB1 = $('#calcB1');
    const calcB2 = $('#calcB2');
    const resultBadge = $('#resultBadge');
    const segA = $('#segA');
    const segB = $('#segB');
    const playBtn = $('#playBtn');

    function renderStep(s) {
      currentStep = s;
      tabs.forEach((tab, i) => tab.classList.toggle('active', i === s));

      // Reset visibilities
      legsA.classList.toggle('dimmed', s < 1);
      legsB.classList.toggle('dimmed', s < 1);

      distA.classList.toggle('dimmed', s < 2);
      distB.classList.toggle('dimmed', s < 2);
      calcA1.classList.toggle('dimmed', s < 2);
      calcB1.classList.toggle('dimmed', s < 2);
      calcA2.classList.toggle('dimmed', s < 2);
      calcB2.classList.toggle('dimmed', s < 2);

      resultBadge.classList.toggle('hidden', s < 3);

      if (s === 3) {
        segA.setAttribute('stroke', '#16a34a');
        segB.setAttribute('stroke', '#16a34a');
      } else {
        segA.setAttribute('stroke', '#2563eb');
        segB.setAttribute('stroke', '#7c3aed');
      }
    }

    function setStep(s) {
      renderStep(s);
    }

    function next() {
      setStep((currentStep + 1) % totalSteps);
    }

    function prev() {
      setStep((currentStep - 1 + totalSteps) % totalSteps);
    }

    function startAuto() {
      if (autoPlayInterval) clearInterval(autoPlayInterval);
      autoPlayInterval = setInterval(next, 3500);
      playBtn.textContent = '⏸';
    }

    function stopAuto() {
      if (autoPlayInterval) {
        clearInterval(autoPlayInterval);
        autoPlayInterval = null;
      }
      playBtn.textContent = '▶';
    }

    function toggleAuto() {
      if (autoPlayInterval) stopAuto();
      else startAuto();
    }

    tabs.forEach((tab, i) => {
      onTap(tab, () => {
        stopAuto();
        setStep(i);
      });
    });

    onTap($('#nextBtn'), () => { stopAuto(); next(); });
    onTap($('#prevBtn'), () => { stopAuto(); prev(); });
    onTap(playBtn, toggleAuto);

    renderStep(0);
    startAuto();
  </script>
</body>
</html>

Properties of Rigid Transformations: Preserving Distance and Angle

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Reflection: Preserving Distance & Angle</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 12px;
      user-select: none;
    }

    /* Interactive segmented controls */
    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      width: 100%;
      max-width: 580px;
      margin-bottom: 8px;
    }
    .btn-step {
      flex: 1 1 160px;
      background: #f1f5f9;
      border: 1.5px solid transparent;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    .btn-step:hover {
      background: #e2e8f0;
      color: #1e2945;
    }
    .btn-step.active {
      background: #eff6ff;
      border-color: #2563eb;
      color: #1d4ed8;
      box-shadow: 0 1px 3px rgba(37,99,235,0.15);
    }

    /* Diagram SVG container */
    .svg-wrap {
      width: 100%;
      max-width: 580px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Transitions for dynamic elements */
    .anim-fade {
      transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .hidden {
      opacity: 0;
      pointer-events: none;
    }
    .visible {
      opacity: 1;
    }

    /* Bottom status callout */
    .status-bar {
      margin-top: 8px;
      width: 100%;
      max-width: 580px;
      min-height: 42px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 500;
      color: #334155;
      text-align: center;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 11.5px;
      font-weight: 700;
    }
    .badge-blue { background: #dbeafe; color: #1e40af; }
    .badge-green { background: #d1fae5; color: #065f46; }
    .badge-purple { background: #f3e8ff; color: #6b21a8; }
    .badge-amber { background: #fef3c7; color: #92400e; }
    .badge-teal { background: #ccfbf1; color: #115e59; }
  </style>
</head>
<body>

  
  <div class="controls" role="tablist">
    <button class="btn-step active" id="btn1" onclick="setStep(1)">1. Pre-Image △ABC</button>
    <button class="btn-step" id="btn2" onclick="setStep(2)">2. Reflect Across y-Axis</button>
    <button class="btn-step" id="btn3" onclick="setStep(3)">3. Angles & Orientation</button>
  </div>

  
  <div class="svg-wrap">
    <svg viewBox="0 0 600 375" aria-label="Coordinate plane showing triangle reflection across y-axis">
      <defs>
        
        <marker id="arr-axis" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#64748b" />
        </marker>
        <marker id="arr-ccw" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="5" markerHeight="5" orient="auto">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#2563eb" />
        </marker>
        <marker id="arr-cw" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="5" markerHeight="5" orient="auto">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#059669" />
        </marker>
      </defs>

      
      <g stroke="#f1f5f9" stroke-width="1.2">
        
        <line x1="60" y1="20" x2="60" y2="330" />
        <line x1="108" y1="20" x2="108" y2="330" />
        <line x1="156" y1="20" x2="156" y2="330" />
        <line x1="204" y1="20" x2="204" y2="330" />
        <line x1="252" y1="20" x2="252" y2="330" />
        <line x1="348" y1="20" x2="348" y2="330" />
        <line x1="396" y1="20" x2="396" y2="330" />
        <line x1="444" y1="20" x2="444" y2="330" />
        <line x1="492" y1="20" x2="492" y2="330" />
        <line x1="540" y1="20" x2="540" y2="330" />

        
        <line x1="30" y1="272" x2="570" y2="272" />
        <line x1="30" y1="224" x2="570" y2="224" />
        <line x1="30" y1="176" x2="570" y2="176" />
        <line x1="30" y1="128" x2="570" y2="128" />
        <line x1="30" y1="80" x2="570" y2="80" />
        <line x1="30" y1="32" x2="570" y2="32" />
      </g>

      
      <g fill="#94a3b8" font-size="11" font-weight="500" text-anchor="middle">
        
        <text x="60" y="338">-5</text>
        <text x="108" y="338">-4</text>
        <text x="156" y="338">-3</text>
        <text x="204" y="338">-2</text>
        <text x="252" y="338">-1</text>
        <text x="348" y="338">1</text>
        <text x="396" y="338">2</text>
        <text x="444" y="338">3</text>
        <text x="492" y="338">4</text>
        <text x="540" y="338">5</text>

        
        <text x="286" y="276" text-anchor="end">1</text>
        <text x="286" y="228" text-anchor="end">2</text>
        <text x="286" y="180" text-anchor="end">3</text>
        <text x="286" y="132" text-anchor="end">4</text>
        <text x="286" y="84" text-anchor="end">5</text>
        <text x="286" y="36" text-anchor="end">6</text>
      </g>

      
      <line x1="30" y1="320" x2="570" y2="320" stroke="#64748b" stroke-width="1.8" marker-end="url(#arr-axis)" />
      <text x="578" y="324" fill="#64748b" font-size="12" font-weight="700">x</text>

      
      <line x1="300" y1="328" x2="300" y2="24" stroke="#9333ea" stroke-width="2.5" stroke-dasharray="6,4" />
      
      <g transform="translate(300, 16)">
        <rect x="-85" y="-12" width="170" height="20" rx="5" fill="#f3e8ff" stroke="#c084fc" stroke-width="1" />
        <text x="0" y="2" fill="#7e22ce" font-size="10.5" font-weight="700" text-anchor="middle">Line of Reflection (x = 0)</text>
      </g>

      
      <g id="grp-tracks" class="anim-fade hidden">
        
        <line x1="108" y1="272" x2="492" y2="272" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="4,4" />
        <line x1="252" y1="80" x2="348" y2="80" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="4,4" />

        
        <path d="M 252 284 L 300 284" stroke="#9333ea" stroke-width="1.5" />
        <path d="M 300 284 L 348 284" stroke="#9333ea" stroke-width="1.5" />
        <circle cx="252" cy="284" r="2" fill="#9333ea" />
        <circle cx="348" cy="284" r="2" fill="#9333ea" />
        <text x="276" y="297" fill="#7e22ce" font-size="10" font-weight="700" text-anchor="middle">d = 1</text>
        <text x="324" y="297" fill="#7e22ce" font-size="10" font-weight="700" text-anchor="middle">d = 1</text>

        
        <text x="276" y="73" fill="#7e22ce" font-size="10" font-weight="700" text-anchor="middle">d = 1</text>
        <text x="324" y="73" fill="#7e22ce" font-size="10" font-weight="700" text-anchor="middle">d = 1</text>
      </g>

      
      <g id="grp-preimage">
        
        <polygon points="108,272 252,272 252,80" fill="rgba(59, 130, 246, 0.16)" stroke="#2563eb" stroke-width="2.5" stroke-linejoin="round" />

        
        
        <path d="M 236 272 L 236 256 L 252 256" fill="none" stroke="#8b5cf6" stroke-width="2" />
        
        <path d="M 136 272 A 28 28 0 0 0 124.8 249.6" fill="none" stroke="#0284c7" stroke-width="2" />
        
        <path d="M 252 108 A 28 28 0 0 1 235.2 102.4" fill="none" stroke="#d97706" stroke-width="2" />

        
        <g id="lbl-angles-pre" class="anim-fade">
          <text x="146" y="263" fill="#0284c7" font-size="10.5" font-weight="700">53.1°</text>
          <text x="238" y="122" fill="#d97706" font-size="10.5" font-weight="700" text-anchor="end">36.9°</text>
          <text x="230" y="250" fill="#8b5cf6" font-size="10.5" font-weight="700" text-anchor="end">90°</text>
        </g>

        
        <g id="orient-ccw">
          <path d="M 194 206 A 18 18 0 1 1 216 218" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" marker-end="url(#arr-ccw)" />
          <text x="204" y="200" fill="#1d4ed8" font-size="10.5" font-weight="700" text-anchor="middle">CCW ↺</text>
        </g>

        
        <circle cx="108" cy="272" r="4.5" fill="#2563eb" />
        <text x="100" y="290" fill="#1e40af" font-size="11.5" font-weight="700" text-anchor="middle">A (-4, 1)</text>

        <circle cx="252" cy="272" r="4.5" fill="#2563eb" />
        <text x="246" y="290" fill="#1e40af" font-size="11.5" font-weight="700" text-anchor="middle">B (-1, 1)</text>

        <circle cx="252" cy="80" r="4.5" fill="#2563eb" />
        <text x="246" y="66" fill="#1e40af" font-size="11.5" font-weight="700" text-anchor="middle">C (-1, 5)</text>
      </g>

      
      <g id="grp-image" class="anim-fade hidden">
        
        <polygon points="492,272 348,272 348,80" fill="rgba(16, 185, 129, 0.16)" stroke="#059669" stroke-width="2.5" stroke-linejoin="round" />

        
        
        <path d="M 364 272 L 364 256 L 348 256" fill="none" stroke="#8b5cf6" stroke-width="2" />
        
        <path d="M 464 272 A 28 28 0 0 1 475.2 249.6" fill="none" stroke="#0284c7" stroke-width="2" />
        
        <path d="M 348 108 A 28 28 0 0 0 364.8 102.4" fill="none" stroke="#d97706" stroke-width="2" />

        
        <g id="lbl-angles-img" class="anim-fade">
          <text x="454" y="263" fill="#0284c7" font-size="10.5" font-weight="700" text-anchor="end">53.1°</text>
          <text x="362" y="122" fill="#d97706" font-size="10.5" font-weight="700">36.9°</text>
          <text x="370" y="250" fill="#8b5cf6" font-size="10.5" font-weight="700">90°</text>
        </g>

        
        <g id="orient-cw">
          <path d="M 406 206 A 18 18 0 1 0 384 218" fill="none" stroke="#059669" stroke-width="2" stroke-linecap="round" marker-end="url(#arr-cw)" />
          <text x="396" y="200" fill="#047857" font-size="10.5" font-weight="700" text-anchor="middle">CW ↻</text>
        </g>

        
        <circle cx="492" cy="272" r="4.5" fill="#059669" />
        <text x="500" y="290" fill="#065f46" font-size="11.5" font-weight="700" text-anchor="middle">A' (4, 1)</text>

        <circle cx="348" cy="272" r="4.5" fill="#059669" />
        <text x="354" y="290" fill="#065f46" font-size="11.5" font-weight="700" text-anchor="middle">B' (1, 1)</text>

        <circle cx="348" cy="80" r="4.5" fill="#059669" />
        <text x="354" y="66" fill="#065f46" font-size="11.5" font-weight="700" text-anchor="middle">C' (1, 5)</text>
      </g>
    </svg>
  </div>

  
  <div class="status-bar" id="statusText">
    <span>Original triangle <span class="badge badge-blue">△ABC</span> has counterclockwise orientation <span class="badge badge-blue">CCW ↺</span></span>
  </div>

  <script>
    const tracks = document.getElementById('grp-tracks');
    const imageGroup = document.getElementById('grp-image');
    const orientCCW = document.getElementById('orient-ccw');
    const orientCW = document.getElementById('orient-cw');
    const statusText = document.getElementById('statusText');

    function setStep(step) {
      // Update buttons active state
      for (let i = 1; i <= 3; i++) {
        document.getElementById('btn' + i).classList.toggle('active', i === step);
      }

      if (step === 1) {
        tracks.classList.remove('visible');
        tracks.classList.add('hidden');
        imageGroup.classList.remove('visible');
        imageGroup.classList.add('hidden');
        orientCCW.style.opacity = '1';
        
        statusText.innerHTML = `Original <span class="badge badge-blue">△ABC</span> with vertex order A → B → C (<span class="badge badge-blue">CCW ↺</span>)`;
      } else if (step === 2) {
        tracks.classList.remove('hidden');
        tracks.classList.add('visible');
        imageGroup.classList.remove('hidden');
        imageGroup.classList.add('visible');
        orientCCW.style.opacity = '1';
        orientCW.style.opacity = '1';

        statusText.innerHTML = `Reflected points lie at <span class="badge badge-purple">equal perpendicular distance</span> from line <span class="badge badge-purple">x = 0</span>`;
      } else if (step === 3) {
        tracks.classList.remove('hidden');
        tracks.classList.add('visible');
        imageGroup.classList.remove('hidden');
        imageGroup.classList.add('visible');
        orientCCW.style.opacity = '1';
        orientCW.style.opacity = '1';

        statusText.innerHTML = `Angles preserved (<span class="badge badge-teal">53.1°</span>, <span class="badge badge-purple">90°</span>, <span class="badge badge-amber">36.9°</span>) • Orientation reverses (<span class="badge badge-blue">↺</span> to <span class="badge badge-green">↻</span>)`;
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>90° Rotation Preserving Distance</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 100vh;
      padding: 10px 12px 12px;
    }

    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      max-width: 440px;
      margin-bottom: 4px;
      font-weight: 600;
      font-size: 14px;
    }

    .badge {
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
      border-radius: 6px;
      padding: 3px 10px;
      font-size: 13px;
      font-weight: 700;
    }

    .svg-container {
      width: 100%;
      max-width: 440px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: auto;
      max-height: 390px;
      overflow: visible;
      user-select: none;
    }

    .grid-line { stroke: #f1f5f9; stroke-width: 1; }
    .axis { stroke: #64748b; stroke-width: 1.5; stroke-linecap: round; }
    .tick { stroke: #94a3b8; stroke-width: 1.2; }
    .axis-num { font-size: 11px; fill: #64748b; font-weight: 500; text-anchor: middle; dominant-baseline: middle; }
    .axis-title { font-size: 13px; fill: #0f172a; font-weight: 700; dominant-baseline: middle; }

    .arc-path {
      fill: none;
      stroke: #94a3b8;
      stroke-width: 1.2;
      stroke-dasharray: 4 3;
    }

    .ghost-segment {
      stroke: #94a3b8;
      stroke-width: 3.5;
      stroke-dasharray: 4 4;
      stroke-linecap: round;
      opacity: 0.7;
    }

    .active-segment {
      stroke: #2563eb;
      stroke-width: 4.5;
      stroke-linecap: round;
    }

    .ghost-point {
      fill: #ffffff;
      stroke: #475569;
      stroke-width: 2;
    }

    .ghost-label {
      font-size: 11px;
      font-weight: 700;
      fill: #334155;
      dominant-baseline: middle;
      text-anchor: start;
    }

    .active-point {
      fill: #2563eb;
      stroke: #ffffff;
      stroke-width: 2;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
    }

    .point-origin { fill: #0f172a; }

    .point-label {
      font-size: 12px;
      font-weight: 700;
      fill: #0f172a;
      text-anchor: middle;
      dominant-baseline: middle;
      paint-order: stroke fill;
      stroke: #ffffff;
      stroke-width: 3.5px;
      stroke-linejoin: round;
    }

    .dist-label {
      font-size: 11px;
      font-weight: 700;
      fill: #0369a1;
      text-anchor: middle;
      dominant-baseline: middle;
      paint-order: stroke fill;
      stroke: #ffffff;
      stroke-width: 3px;
      stroke-linejoin: round;
    }

    .controls {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      margin-top: 4px;
    }

    .slider-row {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
    }

    input[type="range"] {
      flex: 1;
      height: 6px;
      accent-color: #2563eb;
      cursor: pointer;
    }

    .btn-group {
      display: flex;
      gap: 10px;
      width: 100%;
    }

    .btn {
      flex: 1;
      padding: 8px 14px;
      border-radius: 6px;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #1e293b;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .btn:active {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="top-bar">
    <span>Rotate 90° CCW around (0,0)</span>
    <span class="badge" id="angleBadge">0° CCW</span>
  </div>

  <div class="svg-container">
    <svg viewBox="-30 -22 385 385" id="diagram">
      <defs>
        <marker id="arrow-rot" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#64748b" />
        </marker>
        <marker id="axis-arrow" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4.5" markerHeight="4.5" orient="auto">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#64748b" />
        </marker>
      </defs>

      
      <g id="grid"></g>

      
      <path id="arcA" class="arc-path" />
      <path id="arcM" class="arc-path" />
      <path id="arcB" class="arc-path" marker-end="url(#arrow-rot)" />

      
      
      <line x1="104" y1="310" x2="272" y2="310" class="ghost-segment" />
      
      <line x1="20" y1="226" x2="20" y2="58" class="ghost-segment" />

      
      
      <line x1="10" y1="310" x2="332" y2="310" class="axis" marker-end="url(#axis-arrow)" />
      
      <line x1="20" y1="320" x2="20" y2="2" class="axis" marker-end="url(#axis-arrow)" />

      
      <text x="344" y="310" class="axis-title" text-anchor="start">x</text>
      <text x="20" y="-12" class="axis-title" text-anchor="middle">y</text>
      <text x="9" y="321" class="axis-num">0</text>

      
      <circle cx="20" cy="310" r="3.5" class="point-origin" />

      
      <g id="targetGhosts">
        <circle cx="20" cy="226" r="4" class="ghost-point" />
        <circle cx="20" cy="142" r="4" class="ghost-point" />
        <circle cx="20" cy="58" r="4" class="ghost-point" />
        <text x="30" y="226" class="ghost-label">A'(0, 2)</text>
        <text x="30" y="142" class="ghost-label">M'(0, 4)</text>
        <text x="30" y="58" class="ghost-label">B'(0, 6)</text>
      </g>

      
      <g id="rotatingGroup">
        <line id="activeLine" x1="104" y1="310" x2="272" y2="310" class="active-segment" />

        
        <g id="distanceOverlay"></g>

        
        <circle id="ptA" cx="104" cy="310" r="5" class="active-point" />
        <circle id="ptM" cx="188" cy="310" r="5" class="active-point" />
        <circle id="ptB" cx="272" cy="310" r="5" class="active-point" />

        
        <text id="lblA" x="104" y="336" class="point-label">A(2, 0)</text>
        <text id="lblM" x="188" y="336" class="point-label">M(4, 0)</text>
        <text id="lblB" x="272" y="336" class="point-label">B(6, 0)</text>
      </g>
    </svg>
  </div>

  <div class="controls">
    <div class="slider-row">
      <span style="font-size:12px;font-weight:600;color:#64748b;">0°</span>
      <input type="range" id="angleSlider" min="0" max="90" value="0" step="0.5">
      <span style="font-size:12px;font-weight:600;color:#64748b;">90°</span>
    </div>
    <div class="btn-group">
      <button class="btn" id="playBtn">▶ Rotate 90°</button>
      <button class="btn" id="resetBtn">↺ Reset</button>
    </div>
  </div>

  <script>
    const ORIGIN_X = 20;
    const ORIGIN_Y = 310;
    const SCALE = 42; // 42px per unit

    // Build grid and numbered ticks
    const gridG = document.getElementById('grid');
    for (let u = 1; u <= 7; u++) {
      const x = ORIGIN_X + u * SCALE;
      const y = ORIGIN_Y - u * SCALE;

      // X grid & ticks
      const lineV = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      lineV.setAttribute('x1', x); lineV.setAttribute('y1', 12);
      lineV.setAttribute('x2', x); lineV.setAttribute('y2', 310);
      lineV.setAttribute('class', 'grid-line');
      gridG.appendChild(lineV);

      const tickX = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      tickX.setAttribute('x1', x); tickX.setAttribute('y1', 307);
      tickX.setAttribute('x2', x); tickX.setAttribute('y2', 313);
      tickX.setAttribute('class', 'tick');
      gridG.appendChild(tickX);

      const txtX = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      txtX.setAttribute('x', x);
      txtX.setAttribute('y', 321);
      txtX.setAttribute('class', 'axis-num');
      txtX.textContent = u;
      gridG.appendChild(txtX);

      // Y grid & ticks
      const lineH = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      lineH.setAttribute('x1', 20); lineH.setAttribute('y1', y);
      lineH.setAttribute('x2', 320); lineH.setAttribute('y2', y);
      lineH.setAttribute('class', 'grid-line');
      gridG.appendChild(lineH);

      const tickY = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      tickY.setAttribute('x1', 17); tickY.setAttribute('y1', y);
      tickY.setAttribute('x2', 23); tickY.setAttribute('y2', y);
      tickY.setAttribute('class', 'tick');
      gridG.appendChild(tickY);

      const txtY = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      txtY.setAttribute('x', 9);
      txtY.setAttribute('y', y);
      txtY.setAttribute('class', 'axis-num');
      txtY.textContent = u;
      gridG.appendChild(txtY);
    }

    function createArc(radius, startDeg, endDeg) {
      if (endDeg <= startDeg) return '';
      const rad1 = (startDeg * Math.PI) / 180;
      const rad2 = (endDeg * Math.PI) / 180;
      const x1 = ORIGIN_X + radius * Math.cos(rad1);
      const y1 = ORIGIN_Y - radius * Math.sin(rad1);
      const x2 = ORIGIN_X + radius * Math.cos(rad2);
      const y2 = ORIGIN_Y - radius * Math.sin(rad2);
      const largeArc = endDeg - startDeg > 180 ? 1 : 0;
      return `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 0 ${x2} ${y2}`;
    }

    const rA = 2 * SCALE;
    const rM = 4 * SCALE;
    const rB = 6 * SCALE;

    const slider = document.getElementById('angleSlider');
    const angleBadge = document.getElementById('angleBadge');
    const activeLine = document.getElementById('activeLine');
    const ptA = document.getElementById('ptA');
    const ptM = document.getElementById('ptM');
    const ptB = document.getElementById('ptB');
    const lblA = document.getElementById('lblA');
    const lblM = document.getElementById('lblM');
    const lblB = document.getElementById('lblB');
    const arcA = document.getElementById('arcA');
    const arcM = document.getElementById('arcM');
    const arcB = document.getElementById('arcB');
    const distOverlay = document.getElementById('distanceOverlay');
    const playBtn = document.getElementById('playBtn');
    const resetBtn = document.getElementById('resetBtn');

    let animId = null;

    function render(angleDeg) {
      angleBadge.textContent = `${Math.round(angleDeg)}° CCW`;
      const rad = (angleDeg * Math.PI) / 180;
      const cos = Math.cos(rad);
      const sin = Math.sin(rad);

      // Coordinates along rotating line
      const ax = ORIGIN_X + rA * cos;
      const ay = ORIGIN_Y - rA * sin;
      const mx = ORIGIN_X + rM * cos;
      const my = ORIGIN_Y - rM * sin;
      const bx = ORIGIN_X + rB * cos;
      const by = ORIGIN_Y - rB * sin;

      // Line
      activeLine.setAttribute('x1', ax);
      activeLine.setAttribute('y1', ay);
      activeLine.setAttribute('x2', bx);
      activeLine.setAttribute('y2', by);

      // Points
      ptA.setAttribute('cx', ax); ptA.setAttribute('cy', ay);
      ptM.setAttribute('cx', mx); ptM.setAttribute('cy', my);
      ptB.setAttribute('cx', bx); ptB.setAttribute('cy', by);

      // Label offset normal vector (perpendicular to ray)
      // Normal pointing clockwise/downward/rightward
      const normalX = sin;
      const normalY = cos;

      // At 0°, normal is (0, 1), so labels sit safely at y = 310 + 26 = 336 (below tick numbers at 321)
      const labelOffset = 26;

      const nameA = angleDeg > 45 ? "A'(0, 2)" : "A(2, 0)";
      const nameM = angleDeg > 45 ? "M'(0, 4)" : "M(4, 0)";
      const nameB = angleDeg > 45 ? "B'(0, 6)" : "B(6, 0)";

      lblA.textContent = nameA;
      lblA.setAttribute('x', ax + normalX * labelOffset);
      lblA.setAttribute('y', ay + normalY * labelOffset);

      lblM.textContent = nameM;
      lblM.setAttribute('x', mx + normalX * labelOffset);
      lblM.setAttribute('y', my + normalY * labelOffset);

      lblB.textContent = nameB;
      lblB.setAttribute('x', bx + normalX * labelOffset);
      lblB.setAttribute('y', by + normalY * labelOffset);

      // Text anchors near 90 deg for perfect readability
      if (angleDeg > 75) {
        lblA.setAttribute('text-anchor', 'start');
        lblM.setAttribute('text-anchor', 'start');
        lblB.setAttribute('text-anchor', 'start');
      } else {
        lblA.setAttribute('text-anchor', 'middle');
        lblM.setAttribute('text-anchor', 'middle');
        lblB.setAttribute('text-anchor', 'middle');
      }

      // Arcs
      arcA.setAttribute('d', createArc(rA, 0, Math.max(angleDeg, 0.1)));
      arcM.setAttribute('d', createArc(rM, 0, Math.max(angleDeg, 0.1)));
      arcB.setAttribute('d', createArc(rB, 0, Math.max(angleDeg, 0.1)));

      // Distance callouts on the counter-clockwise side (opposite to point labels)
      const distOffset = 16;
      const amMidX = (ax + mx) / 2 - normalX * distOffset;
      const amMidY = (ay + my) / 2 - normalY * distOffset;
      const mbMidX = (mx + bx) / 2 - normalX * distOffset;
      const mbMidY = (my + by) / 2 - normalY * distOffset;

      distOverlay.innerHTML = `
        <text x="${amMidX}" y="${amMidY}" class="dist-label">AM = 2</text>
        <text x="${mbMidX}" y="${mbMidY}" class="dist-label">MB = 2</text>
      `;
    }

    slider.addEventListener('input', (e) => {
      cancelAnimation();
      render(parseFloat(e.target.value));
    });

    function cancelAnimation() {
      if (animId) {
        cancelAnimationFrame(animId);
        animId = null;
      }
    }

    function animateTo(targetAngle) {
      cancelAnimation();
      const startAngle = parseFloat(slider.value);
      const duration = 1100;
      const startTime = performance.now();

      function step(now) {
        const elapsed = now - startTime;
        const progress = Math.min(elapsed / duration, 1);
        const ease = progress < 0.5
          ? 2 * progress * progress
          : 1 - Math.pow(-2 * progress + 2, 2) / 2;

        const current = startAngle + (targetAngle - startAngle) * ease;
        slider.value = current;
        render(current);

        if (progress < 1) {
          animId = requestAnimationFrame(step);
        } else {
          animId = null;
        }
      }
      animId = requestAnimationFrame(step);
    }

    playBtn.addEventListener('click', () => {
      if (parseFloat(slider.value) >= 89.5) {
        slider.value = 0;
        render(0);
      }
      animateTo(90);
    });

    resetBtn.addEventListener('click', () => {
      cancelAnimation();
      slider.value = 0;
      render(0);
    });

    // Initial render
    render(0);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .header-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 680px;
      margin-bottom: 8px;
    }

    .badge-locked {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #e0e7ff;
      color: #4338ca;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid #c7d2fe;
    }

    .controls {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .btn-action {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.2s, border-color 0.2s;
    }
    .btn-action:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 680px;
    }

    @media (max-width: 520px) {
      .cards-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    .transform-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      user-select: none;
    }

    .transform-card:hover {
      border-color: #cbd5e1;
    }

    .card-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 4px;
    }

    .svg-container {
      width: 100%;
      aspect-ratio: 1 / 1;
      max-width: 200px;
    }

    svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    .grid-line {
      stroke: #f1f5f9;
      stroke-width: 1;
    }
    .axis-line {
      stroke: #cbd5e1;
      stroke-width: 1.5;
    }
    .mirror-line {
      stroke: #f59e0b;
      stroke-width: 1.5;
      stroke-dasharray: 4 3;
    }

    .pre-shape {
      fill: #3b82f6;
      fill-opacity: 0.25;
      stroke: #3b82f6;
      stroke-width: 2;
      stroke-linejoin: round;
    }

    .img-shape {
      fill: #8b5cf6;
      fill-opacity: 0.75;
      stroke: #7c3aed;
      stroke-width: 2;
      stroke-linejoin: round;
      transition: transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.4s ease;
    }

    .motion-trace {
      fill: none;
      stroke: #a78bfa;
      stroke-width: 1.5;
      stroke-dasharray: 3 3;
      transition: opacity 0.4s ease;
    }

    .legend {
      display: flex;
      gap: 16px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-top: 8px;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .legend-box {
      width: 12px;
      height: 12px;
      border-radius: 3px;
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <div class="badge-locked">
      <span>🔒</span> Shape &amp; Size: Locked
    </div>
    <div class="controls">
      <button class="btn-action" id="toggleBtn" onclick="toggleAll()">
        <span id="btnIcon">▶</span> <span id="btnText">Transform</span>
      </button>
    </div>
  </div>

  <div class="cards-grid">
    
    <div class="transform-card" onclick="toggleCard(0)">
      <div class="card-title">Translation</div>
      <div class="svg-container">
        <svg viewBox="-50 -50 100 100">
          <defs>
            <marker id="arrow1" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
              <path d="M 0 0 L 6 3 L 0 6 z" fill="#8b5cf6"/>
            </marker>
          </defs>
          
          <line x1="-50" y1="-30" x2="50" y2="-30" class="grid-line"/>
          <line x1="-50" y1="-10" x2="50" y2="-10" class="grid-line"/>
          <line x1="-50" y1="10" x2="50" y2="10" class="grid-line"/>
          <line x1="-50" y1="30" x2="50" y2="30" class="grid-line"/>
          <line x1="-30" y1="-50" x2="-30" y2="50" class="grid-line"/>
          <line x1="-10" y1="-50" x2="-10" y2="50" class="grid-line"/>
          <line x1="10" y1="-50" x2="10" y2="50" class="grid-line"/>
          <line x1="30" y1="-50" x2="30" y2="50" class="grid-line"/>
          <line x1="-50" y1="0" x2="50" y2="0" class="axis-line"/>
          <line x1="0" y1="-50" x2="0" y2="50" class="axis-line"/>

          
          <line id="trace1-a" x1="-35" y1="25" x2="-5" y2="5" class="motion-trace" marker-end="url(#arrow1)" opacity="0"/>
          <line id="trace1-b" x1="-15" y1="25" x2="15" y2="5" class="motion-trace" marker-end="url(#arrow1)" opacity="0"/>
          <line id="trace1-c" x1="-25" y1="5" x2="5" y2="-15" class="motion-trace" marker-end="url(#arrow1)" opacity="0"/>

          
          <polygon points="-35,25 -15,25 -25,5" class="pre-shape"/>
          
          <polygon id="shape1" points="-35,25 -15,25 -25,5" class="img-shape"/>
        </svg>
      </div>
    </div>

    
    <div class="transform-card" onclick="toggleCard(1)">
      <div class="card-title">Reflection</div>
      <div class="svg-container">
        <svg viewBox="-50 -50 100 100">
          <defs>
            <marker id="arrow2" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
              <path d="M 0 0 L 6 3 L 0 6 z" fill="#8b5cf6"/>
            </marker>
          </defs>
          
          <line x1="-50" y1="-30" x2="50" y2="-30" class="grid-line"/>
          <line x1="-50" y1="-10" x2="50" y2="-10" class="grid-line"/>
          <line x1="-50" y1="10" x2="50" y2="10" class="grid-line"/>
          <line x1="-50" y1="30" x2="50" y2="30" class="grid-line"/>
          <line x1="-30" y1="-50" x2="-30" y2="50" class="grid-line"/>
          <line x1="-10" y1="-50" x2="-10" y2="50" class="grid-line"/>
          <line x1="10" y1="-50" x2="10" y2="50" class="grid-line"/>
          <line x1="30" y1="-50" x2="30" y2="50" class="grid-line"/>
          <line x1="-50" y1="0" x2="50" y2="0" class="axis-line"/>
          <line x1="0" y1="-50" x2="0" y2="50" class="mirror-line"/>

          
          <line id="trace2-a" x1="-35" y1="20" x2="35" y2="20" class="motion-trace" marker-end="url(#arrow2)" opacity="0"/>
          <line id="trace2-b" x1="-15" y1="20" x2="15" y2="20" class="motion-trace" marker-end="url(#arrow2)" opacity="0"/>
          <line id="trace2-c" x1="-15" y1="-15" x2="15" y2="-15" class="motion-trace" marker-end="url(#arrow2)" opacity="0"/>

          
          <polygon points="-35,20 -15,20 -15,-15" class="pre-shape"/>
          
          <polygon id="shape2" points="-35,20 -15,20 -15,-15" class="img-shape"/>
        </svg>
      </div>
    </div>

    
    <div class="transform-card" onclick="toggleCard(2)">
      <div class="card-title">Rotation</div>
      <div class="svg-container">
        <svg viewBox="-50 -50 100 100">
          <defs>
            <marker id="arrow3" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
              <path d="M 0 0 L 6 3 L 0 6 z" fill="#8b5cf6"/>
            </marker>
          </defs>
          
          <line x1="-50" y1="-30" x2="50" y2="-30" class="grid-line"/>
          <line x1="-50" y1="-10" x2="50" y2="-10" class="grid-line"/>
          <line x1="-50" y1="10" x2="50" y2="10" class="grid-line"/>
          <line x1="-50" y1="30" x2="50" y2="30" class="grid-line"/>
          <line x1="-30" y1="-50" x2="-30" y2="50" class="grid-line"/>
          <line x1="-10" y1="-50" x2="-10" y2="50" class="grid-line"/>
          <line x1="10" y1="-50" x2="10" y2="50" class="grid-line"/>
          <line x1="30" y1="-50" x2="30" y2="50" class="grid-line"/>
          <line x1="-50" y1="0" x2="50" y2="0" class="axis-line"/>
          <line x1="0" y1="-50" x2="0" y2="50" class="axis-line"/>
          <circle cx="0" cy="0" r="2.5" fill="#f59e0b"/>

          
          
          <path id="trace3-a" d="M 10 10 A 14.14 14.14 0 0 1 -10 10" class="motion-trace" marker-end="url(#arrow3)" opacity="0"/>
          
          <path id="trace3-b" d="M 35 10 A 36.4 36.4 0 0 1 -10 35" class="motion-trace" marker-end="url(#arrow3)" opacity="0"/>
          
          <path id="trace3-c" d="M 10 35 A 36.4 36.4 0 0 1 -35 10" class="motion-trace" marker-end="url(#arrow3)" opacity="0"/>

          
          <polygon points="10,10 35,10 10,35" class="pre-shape"/>
          
          <polygon id="shape3" points="10,10 35,10 10,35" class="img-shape"/>
        </svg>
      </div>
    </div>
  </div>

  <div class="legend">
    <div class="legend-item">
      <div class="legend-box" style="background: rgba(59, 130, 246, 0.35); border: 1.5px solid #3b82f6;"></div>
      <span>Pre-image</span>
    </div>
    <div class="legend-item">
      <div class="legend-box" style="background: #8b5cf6; border: 1.5px solid #7c3aed;"></div>
      <span>Image</span>
    </div>
  </div>

  <script>
    const states = [false, false, false];

    const transforms = [
      {
        shape: document.getElementById('shape1'),
        traces: [document.getElementById('trace1-a'), document.getElementById('trace1-b'), document.getElementById('trace1-c')],
        activeTransform: 'translate(30px, -20px)'
      },
      {
        shape: document.getElementById('shape2'),
        traces: [document.getElementById('trace2-a'), document.getElementById('trace2-b'), document.getElementById('trace2-c')],
        activeTransform: 'scale(-1, 1)'
      },
      {
        shape: document.getElementById('shape3'),
        traces: [document.getElementById('trace3-a'), document.getElementById('trace3-b'), document.getElementById('trace3-c')],
        activeTransform: 'rotate(90deg)'
      }
    ];

    function applyState(idx, isActive) {
      states[idx] = isActive;
      const t = transforms[idx];
      t.shape.style.transform = isActive ? t.activeTransform : 'none';
      t.traces.forEach(trace => {
        trace.style.opacity = isActive ? '1' : '0';
      });
      updateHeaderButton();
    }

    function toggleCard(idx) {
      applyState(idx, !states[idx]);
    }

    function toggleAll() {
      const anyActive = states.some(s => s);
      const targetState = !anyActive;
      for (let i = 0; i < 3; i++) {
        applyState(i, targetState);
      }
    }

    function updateHeaderButton() {
      const allActive = states.every(s => s);
      const btnIcon = document.getElementById('btnIcon');
      const btnText = document.getElementById('btnText');
      if (allActive) {
        btnIcon.textContent = '↺';
        btnText.textContent = 'Reset';
      } else {
        btnIcon.textContent = '▶';
        btnText.textContent = 'Transform';
      }
    }

    // Initial subtle auto-demonstration on load
    setTimeout(() => {
      toggleAll();
    }, 600);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 600px;
    }

    @media (max-width: 440px) {
      .comparison-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    .box {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .box-title {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .box-title.rigid {
      color: #0284c7;
    }

    .box-title.non-rigid {
      color: #7c3aed;
    }

    .stage {
      width: 100%;
      height: 120px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      margin-bottom: 10px;
      position: relative;
      overflow: hidden;
    }

    svg {
      width: 100%;
      height: 100%;
    }

    .properties {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .prop-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #ffffff;
      border: 1px solid #edf2f7;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 700;
    }

    .badge-yes {
      background: #dcfce7;
      color: #15803d;
    }

    .badge-no {
      background: #fee2e2;
      color: #b91c1c;
    }

    /* Animation effects */
    .orig-shape {
      stroke-dasharray: 4 3;
      opacity: 0.45;
    }

    .rigid-animated {
      transform-origin: 45px 70px;
      animation: rigidMotion 4s ease-in-out infinite;
    }

    .scale-animated {
      transform-origin: 35px 85px;
      animation: scaleMotion 4s ease-in-out infinite;
    }

    @keyframes rigidMotion {
      0%, 15% {
        transform: translate(0, 0) rotate(0deg);
      }
      45%, 75% {
        transform: translate(80px, -15px) rotate(25deg);
      }
      90%, 100% {
        transform: translate(0, 0) rotate(0deg);
      }
    }

    @keyframes scaleMotion {
      0%, 15% {
        transform: scale(1);
      }
      45%, 75% {
        transform: scale(1.85);
      }
      90%, 100% {
        transform: scale(1);
      }
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="box">
      <div class="box-title rigid">
        <span>Rigid</span>
      </div>

      <div class="stage">
        <svg viewBox="0 0 200 120">
          
          <line x1="10" y1="95" x2="190" y2="95" stroke="#f1f5f9" stroke-width="1.5" />
          <line x1="10" y1="60" x2="190" y2="60" stroke="#f1f5f9" stroke-width="1.5" />
          
          
          <polygon points="25,90 65,90 45,45" fill="#bae6fd" stroke="#0284c7" stroke-width="1.5" class="orig-shape" />
          
          
          <g class="rigid-animated">
            <polygon points="25,90 65,90 45,45" fill="#38bdf8" fill-opacity="0.75" stroke="#0284c7" stroke-width="2" />
            
            <path d="M 33,90 A 8 8 0 0 0 30,83" fill="none" stroke="#0369a1" stroke-width="1.5" />
          </g>

          
          <path d="M 55,45 Q 90,20 125,40" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />
          <polygon points="127,37 127,45 120,41" fill="#94a3b8" />
        </svg>
      </div>

      <div class="properties">
        <div class="prop-row">
          <span>Length</span>
          <span class="badge badge-yes">✓ YES</span>
        </div>
        <div class="prop-row">
          <span>Angles</span>
          <span class="badge badge-yes">✓ YES</span>
        </div>
        <div class="prop-row">
          <span>Collinear</span>
          <span class="badge badge-yes">✓ YES</span>
        </div>
      </div>
    </div>

    
    <div class="box">
      <div class="box-title non-rigid">
        <span>Non-Rigid (Dilation ×2)</span>
      </div>

      <div class="stage">
        <svg viewBox="0 0 200 120">
          
          <line x1="10" y1="95" x2="190" y2="95" stroke="#f1f5f9" stroke-width="1.5" />
          <line x1="10" y1="60" x2="190" y2="60" stroke="#f1f5f9" stroke-width="1.5" />

          
          <line x1="20" y1="100" x2="180" y2="20" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2 2" />

          
          <polygon points="35,85 65,85 50,55" fill="#ddd6fe" stroke="#7c3aed" stroke-width="1.5" class="orig-shape" />

          
          <g class="scale-animated">
            <polygon points="35,85 65,85 50,55" fill="#a78bfa" fill-opacity="0.65" stroke="#7c3aed" stroke-width="1.5" />
            
            <path d="M 41,85 A 6 6 0 0 0 39,80" fill="none" stroke="#6d28d9" stroke-width="1.2" />
          </g>

          
          <path d="M 75,70 L 105,50" fill="none" stroke="#a855f7" stroke-width="1.5" stroke-dasharray="3 3" />
          <polygon points="107,48 106,56 99,52" fill="#a855f7" />
        </svg>
      </div>

      <div class="properties">
        <div class="prop-row">
          <span>Length</span>
          <span class="badge badge-no">✕ NO (×2)</span>
        </div>
        <div class="prop-row">
          <span>Angles</span>
          <span class="badge badge-yes">✓ YES</span>
        </div>
        <div class="prop-row">
          <span>Collinear</span>
          <span class="badge badge-yes">✓ YES</span>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      user-select: none;
    }
    .panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 700;
      color: #334155;
    }
    .badge {
      font-size: 11px;
      font-weight: 700;
      color: #059669;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      border-radius: 4px;
      padding: 1px 6px;
    }
    svg {
      width: 100%;
      height: 72px;
      display: block;
    }
    .point-label {
      font-size: 11px;
      font-weight: 700;
      font-family: system-ui, sans-serif;
    }
    .dim-label {
      font-size: 11px;
      font-weight: 800;
      fill: #059669;
      font-family: system-ui, sans-serif;
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 2px;
    }
    button {
      background: #0284c7;
      color: #ffffff;
      border: none;
      border-radius: 6px;
      padding: 5px 14px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    button:active { background: #0369a1; }
    .slider-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
    }
    input[type="range"] {
      width: 130px;
      accent-color: #0284c7;
      cursor: pointer;
    }
  </style>
</head>
<body>

  
  <div class="panel">
    <div class="panel-header">
      <span>1. Distance</span>
      <span class="badge">AB = A'B'</span>
    </div>
    <svg viewBox="0 0 340 70">
      
      <g id="seg-pre">
        <line x1="25" y1="42" x2="105" y2="42" stroke="#0284c7" stroke-width="3.5" stroke-linecap="round"/>
        
        <line x1="25" y1="56" x2="105" y2="56" stroke="#94a3b8" stroke-width="1.2"/>
        <line x1="25" y1="52" x2="25" y2="60" stroke="#94a3b8" stroke-width="1.2"/>
        <line x1="105" y1="52" x2="105" y2="60" stroke="#94a3b8" stroke-width="1.2"/>
        <text x="65" y="65" text-anchor="middle" class="dim-label">5</text>
        <circle cx="25" cy="42" r="3.5" fill="#0284c7"/>
        <circle cx="105" cy="42" r="3.5" fill="#0284c7"/>
        <text x="25" y="32" text-anchor="middle" fill="#0369a1" class="point-label">A</text>
        <text x="105" y="32" text-anchor="middle" fill="#0369a1" class="point-label">B</text>
      </g>

      
      <g transform="translate(150, 38)">
        <path d="M 0 0 L 22 0 M 16 -4 L 22 0 L 16 4" fill="none" stroke="#cbd5e1" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
      </g>

      
      <g id="seg-img">
        <line x1="210" y1="52" x2="280" y2="18" stroke="#8b5cf6" stroke-width="3.5" stroke-linecap="round"/>
        
        <line x1="204" y1="40" x2="274" y2="6" stroke="#94a3b8" stroke-width="1.2"/>
        <line x1="200" y1="46" x2="208" y2="34" stroke="#94a3b8" stroke-width="1.2"/>
        <line x1="270" y1="12" x2="278" y2="0" stroke="#94a3b8" stroke-width="1.2"/>
        <text x="246" y="20" text-anchor="middle" class="dim-label">5</text>
        <circle cx="210" cy="52" r="3.5" fill="#8b5cf6"/>
        <circle cx="280" cy="18" r="3.5" fill="#8b5cf6"/>
        <text x="202" y="65" text-anchor="middle" fill="#6d28d9" class="point-label">A'</text>
        <text x="290" y="26" text-anchor="middle" fill="#6d28d9" class="point-label">B'</text>
      </g>
    </svg>
  </div>

  
  <div class="panel">
    <div class="panel-header">
      <span>2. Angle</span>
      <span class="badge">∠B = ∠B'</span>
    </div>
    <svg viewBox="0 0 340 70">
      
      <g id="ang-pre">
        <path d="M 95 54 L 35 54 L 65 10" fill="none" stroke="#0284c7" stroke-width="3" stroke-linejoin="round"/>
        <path d="M 55 54 A 20 20 0 0 0 45 36.6" fill="none" stroke="#059669" stroke-width="2"/>
        <text x="60" y="44" class="dim-label">60°</text>
        <circle cx="35" cy="54" r="3.5" fill="#0284c7"/>
        <text x="23" y="58" text-anchor="middle" fill="#0369a1" class="point-label">B</text>
      </g>

      
      <g transform="translate(150, 38)">
        <path d="M 0 0 L 22 0 M 16 -4 L 22 0 L 16 4" fill="none" stroke="#cbd5e1" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
      </g>

      
      <g id="ang-img">
        <path d="M 215 16 L 245 60 L 305 60" fill="none" stroke="#8b5cf6" stroke-width="3" stroke-linejoin="round"/>
        <path d="M 265 60 A 20 20 0 0 1 235 45.4" fill="none" stroke="#059669" stroke-width="2"/>
        <text x="250" y="50" class="dim-label">60°</text>
        <circle cx="245" cy="60" r="3.5" fill="#8b5cf6"/>
        <text x="245" y="70" text-anchor="middle" fill="#6d28d9" class="point-label">B'</text>
      </g>
    </svg>
  </div>

  
  <div class="panel">
    <div class="panel-header">
      <span>3. Collinearity</span>
      <span class="badge">Straight Line</span>
    </div>
    <svg viewBox="0 0 340 70">
      
      <g id="col-pre">
        <line x1="15" y1="46" x2="115" y2="26" stroke="#94a3b8" stroke-width="2" stroke-dasharray="4 3"/>
        <circle cx="25" cy="44" r="3.5" fill="#0284c7"/>
        <circle cx="65" cy="36" r="3.5" fill="#0284c7"/>
        <circle cx="105" cy="28" r="3.5" fill="#0284c7"/>
        <text x="25" y="60" text-anchor="middle" fill="#0369a1" class="point-label">P</text>
        <text x="65" y="52" text-anchor="middle" fill="#0369a1" class="point-label">Q</text>
        <text x="105" y="44" text-anchor="middle" fill="#0369a1" class="point-label">R</text>
      </g>

      
      <g transform="translate(150, 38)">
        <path d="M 0 0 L 22 0 M 16 -4 L 22 0 L 16 4" fill="none" stroke="#cbd5e1" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
      </g>

      
      <g id="col-img">
        <line x1="195" y1="20" x2="295" y2="56" stroke="#94a3b8" stroke-width="2" stroke-dasharray="4 3"/>
        <circle cx="205" cy="23.6" r="3.5" fill="#8b5cf6"/>
        <circle cx="245" cy="38" r="3.5" fill="#8b5cf6"/>
        <circle cx="285" cy="52.4" r="3.5" fill="#8b5cf6"/>
        <text x="200" y="16" text-anchor="middle" fill="#6d28d9" class="point-label">P'</text>
        <text x="240" y="30" text-anchor="middle" fill="#6d28d9" class="point-label">Q'</text>
        <text x="280" y="44" text-anchor="middle" fill="#6d28d9" class="point-label">R'</text>
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <button id="animBtn" onclick="togglePlay()">▶ Transform</button>
    <div class="slider-wrap">
      <span>Pre</span>
      <input type="range" id="slider" min="0" max="100" value="100" oninput="updateProgress(this.value)">
      <span>Image</span>
    </div>
  </div>

  <script>
    let timer = null;
    let playing = false;

    function updateProgress(val) {
      const t = val / 100;
      // Pre-image fades out slightly as t reaches 1, image shines
      const preOpacity = 0.35 + (1 - t) * 0.65;
      const imgOpacity = 0.35 + t * 0.65;

      ['seg', 'ang', 'col'].forEach(id => {
        const pre = document.getElementById(id + '-pre');
        const img = document.getElementById(id + '-img');
        if (pre) pre.style.opacity = preOpacity;
        if (img) img.style.opacity = imgOpacity;
      });
    }

    function togglePlay() {
      const btn = document.getElementById('animBtn');
      const slider = document.getElementById('slider');

      if (playing) {
        clearInterval(timer);
        playing = false;
        btn.textContent = '▶ Transform';
      } else {
        playing = true;
        btn.textContent = '⏸ Pause';
        let forward = slider.value < 100;
        timer = setInterval(() => {
          let v = parseInt(slider.value, 10);
          if (forward) {
            v += 4;
            if (v >= 100) { v = 100; forward = false; }
          } else {
            v -= 4;
            if (v <= 0) { v = 0; forward = true; }
          }
          slider.value = v;
          updateProgress(v);
        }, 50);
      }
    }

    // Initialize full comparison state
    updateProgress(100);
  </script>
</body>
</html>

Coordinate Rules for Translations

Coordinate Rules for Reflections Across Axes and Lines

Coordinate Rules for Rotations About the Origin

Rotations About Arbitrary Points

Translations, Reflections, and Rotations on the Coordinate Plane

Compositions of Rigid Motions

Preserving Parallelism and Collinearity Under Rigid Motions

Defining Geometric Congruence via Sequences of Rigid Motions

math

Rigid Transformations and Coordinate Mappings

生活中的对称现象与轴对称的概念

轴对称图形与两个图形成轴对称的区别与联系

轴对称的性质：对应点连线被对称轴垂直平分

轴对称中对应线段相等与对应角相等

根据成轴对称的两个图形确定对称轴

自然界中的轴对称：动植物与晶体构造

人文建筑与艺术设计中的轴对称

标志、车标与徽标中的轴对称分析

用折纸实验探究多条对称轴的图形

轴对称与轴对称图形的辨析与综合反思

图形的轴对称：概念、性质与生活中的对称

作一个点关于已知直线的对称点

作线段关于直线的对称线段

作三角形关于直线的对称三角形

作多边形关于任意斜直线的对称图形

直角坐标系中关于 x 轴对称的点的坐标特征

直角坐标系中关于 y 轴对称的点的坐标特征

关于平行于坐标轴的直线对称的坐标推算

在直角坐标系中利用坐标画轴对称图形

将军饮马问题与轴对称求线段和最值

轴对称作图的规范性与综合应用

轴对称作图与直角坐标系中的轴对称

等腰三角形的轴对称性与三线合一

等边三角形的三条对称轴与中心特征

矩形的两条对称轴与垂直平分线特征

菱形的对称轴与对角线所在直线

正方形的四条对称轴与综合对称性

正多边形的边数与对称轴条数的规律

圆的无限条对称轴与垂径定理的本质

等腰梯形的轴对称性与性质探究

常见平面几何图形对称轴条数大比拼

利用图形的轴对称性质进行几何证明与计算

常见几何图形的轴对称性质深化

生活中的平移现象与平移的数学定义

平移的性质：对应点连线平行（或共线）且相等

平移前后图形形状、大小及对应角的关系

按指定方向和距离作三角形的平移图形

直角坐标系中点的左右平移与横坐标变化

直角坐标系中点的上下平移与纵坐标变化

平面直角坐标系中图形的两次连续平移（斜向平移）

工程建筑、传送带与现代交通中的平移应用

利用平移转化法求不规则图形的周长与面积

平移在平行线性质与几何证明中的应用

图形的平移：概念、性质与坐标变换

生活中的旋转现象与旋转的三要素

旋转的基本性质：对应点到中心距离相等与旋转角相等

旋转变换中图形的全等性与对应线段角关系

作一个点绕旋转中心旋转给定角度后的点

作线段与三角形绕定点旋转后的图形

旋转构造中的等腰三角形模型与角平分线

共顶点等边三角形（或等腰直角三角形）的旋转与手拉手模型

直角坐标系中点绕原点顺时针与逆时针旋转 90° 的坐标规律

旋转中的动点轨迹与线段最值探究

旋转性质在综合几何证明中的转化策略

图形的旋转：概念、旋转三要素与性质

中心对称的概念：旋转 180° 的特殊旋转变换

中心对称的性质：对应点连线经过对称中心且被其平分

中心对称图形的概念与判定方法

作点、线段和三角形关于定点的中心对称图形

线段与平行四边形的中心对称性探索

正多边形的中心对称性：偶数边正多边形的对称中心

圆的中心对称性与圆心特征

直角坐标系中关于原点对称的点的坐标变化

自然界与生活中的中心对称图形欣赏与应用

轴对称图形与中心对称图形的综合对比与辨析

中心对称与中心对称图形

平移、旋转与轴对称的共性（全等变换）与特征对比

图形的连续变换：平移与轴对称的复合

运用轴对称进行剪纸与徽章图案设计

运用平移设计花边与连续二方连续纹样

运用旋转设计万花筒与旋转对称艺术图案

平面镶嵌原理：用单一种类或多种正多边形密铺平面

埃舍尔式图形变换与创意平面密铺设计

直角坐标系中图形运动的代数表达综合

图案设计成果展评与背后的几何变换原理解析

全等变换单元思维导图与方法归纳

图形变换的综合应用与平面图案设计

相似三角形性质：对应高的比等于相似比

相似三角形性质：对应中线与对应角平分线的比等于相似比

相似三角形周长比等于相似比的严密证明与应用

相似三角形面积比等于相似比的平方的严密证明与计算

双垂直（母子三角形）模型与射影定理推导

一线三等角（K 字型）相似模型解析与应用

旋转相似与大小手拉手几何模型

相似三角形中的辅助线构造：做平行线与截长补短

相似三角形在圆中的应用：相交弦与切割线性质

相似三角形性质的综合几何代数化求解

相似三角形的性质定理与经典几何模型

解直角三角形的概念与边角五元素关系

基本类型一：已知两边（两直角边或一直角边一斜边）解直角三角形

基本类型二：已知一边一锐角解直角三角形

仰角与俯角问题：测量建筑物与无人机高度

方向角（方位角）问题：航海避礁与航空飞行定位

坡度与坡角问题：堤坝防洪与公路铁路工程坡比计算

化一般三角形为直角三角形：作高线（分割或补形）解题策略

双直角三角形（背靠背与母子型）列方程联合求解

跨学科应用：物理力的正交分解与日地月天文距离间接估算

图形的变化与相似全单元体系建构与高中几何衔接

解直角三角形及其在实际工程测量中的应用

关于 x 轴和 y 轴对称的点的坐标变化规律

关于原点对称（中心对称）的点的坐标变化规律

以坐标轴为对称轴的多边形对称图形绘制与顶点坐标变换

沿单一坐标轴方向平移时点的坐标变化规律（“左减右加，上加下减”）

多边形沿坐标轴方向平移一定距离后图形的顶点坐标确定

多边形依次沿两个坐标轴方向平移后的复合平移关系与顶点坐标

以原点为位似中心时坐标按倍数放缩与位似图形的生成

图形与坐标单元体系总结与尺规作图前瞻衔接

图形的运动与坐标变换规律

Introduction to Transformations

Translations on the Coordinate Plane

Reflections on the Coordinate Plane

Rotations on the Coordinate Plane

Properties of Transformations: Lines to Lines

Properties of Transformations: Angles Preserved

Properties of Transformations: Parallel Lines

Verifying Transformation Properties Experimentally

Rigid Transformations on the Coordinate Plane

Sequences of Transformations

Understanding Congruence Through Transformations

Describing a Congruence Sequence

Identifying Congruent Figures

Translations and Congruence

Reflections and Congruence

Rotations and Congruence

Finding the Transformation Sequence for Congruence

Real-World Applications of Transformations

Congruence Through Sequences of Transformations

Introduction to Dilations

Scale Factor in Dilations

Dilations Centered at the Origin

Dilations Not Centered at the Origin

Describing the Effect of Dilations on Coordinates

Translations Using Coordinates

Reflections Using Coordinates

Rotations Using Coordinates

Multiple Transformations Using Coordinates

Dilations and Coordinate Transformations

Introduction to Similarity

Similar Figures Through Transformations

Describing Similarity Sequences

Identifying Similar Figures

Finding the Transformation Sequence for Similarity

Real-World Applications of Dilations and Similarity

Similarity and Applications

Properties of Orientation in Transformations

Properties of Congruence in Transformations

Generalizing Transformation Properties on the Coordinate Plane

Transformations That Preserve Congruence

Transformations That Do Not Preserve Congruence

Differentiating Between Congruence-Preserving and Non-Preserving Transformations

OGM.9.TRN.1

Aligned learning resources

Related diagrams