Skip to content
This repository was archived by the owner on Oct 17, 2025. It is now read-only.

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

Merged
merged 1 commit into from
Dec 10, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 9 additions & 8 deletions live-examples/css-examples/transforms/transform-origin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 1 addition & 1 deletion live-examples/css-examples/transforms/transform-origin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
Loading