Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Use CSS transforms to create the flip or rotation, then add JavaScript when you need to control when it starts, pauses, reverses, or plays. Capturing that effect is a separate step: a still screenshot shows one frame, while a recording preserves motion. For a user-mediated recording, the browser’s Screen Capture API asks the viewer to choose what to share; for automated page capture, a hosted service can record a page interaction.
Choose the right approach for the effect
First decide what should move. A card turning to reveal its back is an element-level effect. A page or app changing views is a view transition. Rearranging a layout and animating items from their former positions is a different problem again. The choice determines whether CSS alone is enough, whether JavaScript should control playback, and what you need to capture.
![Animation in HTML, CSS, and JavaScript [Color Version]](https://m.media-amazon.com/images/I/41ibI92SSuL._SL160_.jpg)
| Goal | Approach | When it fits |
|---|---|---|
| Flip or rotate one element | CSS transform, often with perspective |
A card, tile, image, or other element changes orientation in response to a class, pseudo-class, or interaction. |
| Control playback in code | Web Animations API | JavaScript needs to start, pause, reverse, or change an animation’s playback rate. |
| Animate a view update or navigation | View Transition API | An app changes its view, and the old and new states should animate between one another. |
| Animate elements after a layout change | GSAP Flip | Elements move or resize because their layout or state changed; the animation should bridge their earlier and later geometry. |
These techniques solve different problems and can be combined where appropriate. A view transition is not a screen recording or a downloadable video; it animates the change between views in the page.
Free tools Windows power users keep installed
One-click scans. No signup required.
Build a reversible card flip with CSS and JavaScript
For a single card, CSS handles the geometry and appearance; JavaScript toggles a class to trigger the change. The example below uses two faces inside a rotating card. The back face starts turned around so it faces the viewer after the card rotates. Perspective on the scene gives the movement depth.
#1 Best Overall
HTML
<button class="flip-button" type="button" aria-pressed="false">
Flip card
</button>
<div class="scene">
<div class="card">
<section class="card__face card__front">
<h2>Front</h2>
<p>The front of the card.</p>
</section>
<section class="card__face card__back">
<h2>Back</h2>
<p>The reverse side.</p>
</section>
</div>
</div>CSS
.scene {
width: 20rem;
height: 12rem;
perspective: 800px;
}
.card {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 600ms ease;
}
.card.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
inset: 0;
display: grid;
align-content: center;
padding: 1.5rem;
box-sizing: border-box;
border: 1px solid #aaa;
border-radius: 0.75rem;
backface-visibility: hidden;
}
.card__front {
background: white;
}
.card__back {
background: #eaf2ff;
transform: rotateY(180deg);
}
@media (prefers-reduced-motion: reduce) {
.card {
transition-duration: 0.01ms;
}
}JavaScript
const button = document.querySelector('.flip-button');
const card = document.querySelector('.card');
button.addEventListener('click', () => {
const flipped = card.classList.toggle('is-flipped');
button.setAttribute('aria-pressed', String(flipped));
});The button makes the effect available without requiring a mouse hover, which is important for touch users and keyboard navigation. The aria-pressed value communicates the toggle state to assistive technology. Keep meaningful content on both faces accessible and ensure focusable controls do not become unreachable when a face is turned away.
For a simple visual demonstration, a CSS pseudo-class can trigger the same class of effect: for example, :hover or :focus-within. A class controlled by JavaScript is more suitable when activation must persist after a tap, be driven by application state, or synchronize with other behavior.
Use the Web Animations API for playback control
Use the Web Animations API when a class toggle is not enough and code needs an animation object that can be controlled. It accepts transform keyframes and exposes playback controls such as pause, reverse, and playback-rate adjustment.
Rank #2
const card = document.querySelector('.card');
const flip = card.animate(
[
{ transform: 'rotateY(0deg)' },
{ transform: 'rotateY(180deg)' }
],
{
duration: 600,
easing: 'ease-in-out',
fill: 'forwards'
}
);
// Examples of programmatic control:
// flip.pause();
// flip.playbackRate = 0.5;
// flip.reverse();Because this example animates the card element directly, it does not by itself define front and back faces; retain the two-face CSS structure if the reverse side must be visible. Decide how the animation’s final visual state should be represented in the page’s application state before relying on it for repeated interactions. For a straightforward reversible card, a class and CSS transition are usually simpler; use an animation object when script-controlled playback is part of the requirement.
Use View Transition API for changing views
The View Transition API is intended for transitions between view states, rather than for recording a page. In a single-page application, the API can capture the old and new states around a DOM update callback. The default transition cross-fades; CSS can customize the old and new snapshot animations.
function showNextView() {
const update = () => {
document.querySelector('main').innerHTML =
'<h1>Next view</h1><p>The content has changed.</p>';
};
if (document.startViewTransition) {
document.startViewTransition(update);
} else {
update();
}
}
showNextView();The feature check provides a non-transition fallback for environments where the method is unavailable. For multi-page applications, cross-document transitions require opt-in and, according to MDN’s usage guidance, currently require the documents to be same-origin. Do not assume this approach will animate navigation between unrelated websites. Check current browser compatibility information when choosing it for a production experience.
Use FLIP for layout movement, not a simple card flip
GSAP Flip is designed for layout changes: it records an element’s position, size, rotation, and skew, then animates from the earlier geometry after the DOM or layout state changes. That makes it useful when items reorder, move between containers, or change size. It is not required just to rotate a card; CSS transforms or the Web Animations API are a more direct fit for that task.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteCapture the result: still image or moving recording?
Decide what someone needs to see before choosing a capture method. A still image records only one moment, so it can show the front or back of a card but cannot explain the motion between them. A GIF or other recording can preserve movement, subject to the selected capture method’s supported output and limits.
| Capture path | What it does | Important constraint |
|---|---|---|
| Browser Screen Capture API | getDisplayMedia() asks the user to select a screen or portion of a screen and returns a media stream. |
It is user-mediated: permission is required, as is transient user activation. It is not silent automated capture. |
| Capture animated screenshot endpoint | Capture documents a hosted endpoint for recording page interactions as an animated GIF, with viewport and device-emulation options. | Capture’s current documentation lists GIF as the format and a maximum duration of 30 seconds. Those are vendor-documented limits, not universal browser limits. |
For the Screen Capture API, call getDisplayMedia() from a user-initiated action and handle the permission or selection flow. The returned stream can be recorded with browser media-recording APIs; the user must be able to see what is being shared and stop it. This is a different workflow from asking a hosted service to load a URL and capture it automatically. The available source material does not establish a universal browser recording format or duration, so check the target browser’s documentation for those details.
Or skip the browser setup
For an automated still capture of a page, ScreenshotNeo takes a URL in one GET request and returns a screenshot. It is not an animated GIF recorder, so use a recording workflow when the motion itself must be delivered. ScreenshotNeo can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before a capture; each of those steps can be turned off. Bot checks, blank pages, and failed loads are not billed, and response headers report the page verdict and billing status. Its MCP server lets AI agents use screenshot tools, and every plan has the listed features.
Example using cURL (replace the URL with the page you want to capture):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo or sign up for 1,000 free screenshots a month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot common problems
- The card spins but the reverse is blank or mirrored. Check that the back face is rotated 180 degrees and both faces use
backface-visibility: hidden. Confirm that the parent preserves 3D transforms and that the flipped class is applied to the rotating card, not to only one face. - The card flips on desktop but not by touch. A hover-only interaction is not a reliable touch control. Use a button or another explicit control to toggle a persistent class.
- The control works but announces the wrong state. Update an accessible state such as
aria-pressedeach time the class changes; do not leave a toggle button’s state fixed. - The view changes without an animation. Keep the DOM update as the transition callback and provide a direct update fallback. Check current support in the browsers you target; the API’s presence should not be assumed.
- Cross-page transition does not run. Cross-document transitions need opt-in on both documents and are limited to same-origin documents according to MDN’s guidance. They are not a general mechanism for animating between any two websites.
- Screen capture fails to start. Invoke capture in response to a user action, then allow the browser’s selection and permission flow. A page cannot use this API as a silent recorder without user involvement.
- A captured still does not show the animation. A screenshot is one frame. Capture after the desired state is visible, or choose a recording workflow if the movement must be shown.
- An automated capture is longer than the documented limit. Capture’s documentation lists a 30-second maximum for its animated screenshot endpoint; shorten the interaction or use a workflow whose documented duration meets the need.
Accessibility, reliability, and performance checks
- Provide a clear control for starting and reversing an interaction; do not make hover the only way to reveal essential content.
- Respect the user’s reduced-motion preference. A reduced or removed transition should not remove information or make the interface unusable.
- Check keyboard access, focus order, and screen-reader state as well as visual appearance. A visually hidden face may still contain focusable controls; ensure users cannot tab into an obscured side.
- Test the actual capture path. A user-selected screen recording and a hosted URL capture have different permission, setup, and output characteristics.
- For automated captures, choose the target viewport and device emulation deliberately, and make sure the page has reached the state to be captured. A screenshot of the wrong state is not fixed by a more elaborate animation.
- Check browser support at implementation time, particularly for View Transition API features whose availability may change. Apple’s archived Safari Visual Effects Programming Guide describes foundational 2D and 3D transforms on HTML elements, but an archived guide is not evidence of present-day compatibility.
Apple Developer Documentation’s archived Safari Visual Effects Programming Guide describes applying 2D or 3D transforms to HTML elements, including using element faces for box-like or page-like effects. Treat it as foundational background, not a current compatibility statement. No study statistic is needed to choose among these approaches; the relevant constraints are the effect, playback control, browser support, and capture deliverable.
Frequently Asked Questions
Can JavaScript flip a card without CSS transforms?
JavaScript can change content or classes, but a 3D turning effect still needs a rendering technique such as CSS transforms or another animation system.
Does the View Transition API save a video or GIF?
No. It animates changes between view states in the page; capturing a recording is a separate operation.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Can a screenshot show a flip animation?
It can show a particular frame, such as the front or back, but a still screenshot cannot preserve the motion.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
