From 92c1c7ab5a85f6f65a5f058530226f156cb3a5c5 Mon Sep 17 00:00:00 2001
From: lionel-rowe <lionel.rowe@gmail.com>
Date: Tue, 10 Dec 2024 16:37:33 +0800
Subject: [PATCH] fix: Fix JS for CSS transform-origin example (#2875) (#2876)

---
 .../transforms/transform-origin.html            | 17 +++++++++--------
 .../css-examples/transforms/transform-origin.js |  2 +-
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/live-examples/css-examples/transforms/transform-origin.html b/live-examples/css-examples/transforms/transform-origin.html
index b6cf9f3e7..c715acf6b 100644
--- 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
index 36766ff74..a10c1a488 100644
--- 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 */