fix: Fix JS for CSS transform-origin example (#2875)

mdn · Dec 10, 2024 · a16c1bc · a16c1bc
1 parent 05e3f2c
commit a16c1bc
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/live-examples/css-examples/transforms/transform-origin.html b/live-examples/css-examples/transforms/transform-origin.html
@@ -1,27 +1,28 @@
 <section id="example-choice-list" class="example-choice-list large" data-property="transform-origin">
-  <div class="example-choice">
-    <pre><code class="language-css" data-animation="rotate">transform-origin: center;</code></pre>
+  <div class="example-choice" data-animation="rotate">
+    <pre><code class="language-css">transform-origin: center;</code></pre>
     <button type="button" class="copy hidden" aria-hidden="true">
       <span class="visually-hidden">Copy to Clipboard</span>
     </button>
   </div>
 
-  <div class="example-choice">
-    <pre><code class="language-css" data-animation="rotate">transform-origin: top left;</code></pre>
+  <div class="example-choice" data-animation="rotate">
+    <pre><code class="language-css">transform-origin: top left;</code></pre>
     <button type="button" class="copy hidden" aria-hidden="true">
       <span class="visually-hidden">Copy to Clipboard</span>
     </button>
   </div>
 
-  <div class="example-choice">
-    <pre><code class="language-css" data-animation="rotate">transform-origin: 50px 50px;</code></pre>
+  <div class="example-choice" data-animation="rotate">
+    <pre><code class="language-css">transform-origin: 50px 50px;</code></pre>
     <button type="button" class="copy hidden" aria-hidden="true">
       <span class="visually-hidden">Copy to Clipboard</span>
     </button>
   </div>
 
-  <div class="example-choice">
-    <pre><code class="language-css" data-animation="rotate3d">transform-origin: bottom right 60px;</code></pre>
+  <div class="example-choice" data-animation="rotate3d">
+    <pre><code class="language-css">/* 3D rotation with z-axis origin */
+transform-origin: bottom right 60px;</code></pre>
     <button type="button" class="copy hidden" aria-hidden="true">
       <span class="visually-hidden">Copy to Clipboard</span>
     </button>

diff --git a/live-examples/css-examples/transforms/transform-origin.js b/live-examples/css-examples/transforms/transform-origin.js
@@ -2,7 +2,7 @@
 
 window.addEventListener('load', () => {
   function update() {
-    const selected = document.querySelector('.selected code');
+    const selected = document.querySelector('.selected');
 
     /* Restart the animation
            https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Tips */