164 CSS transform examples

This is a Skeuomorphic Reversi Radio Button component. It overrides standard browser inputs to create a tactile, three-dimensional interaction mechanism. Its function is to replace flat state changes with physical motion, animating the selection exactly like a two-sided piece flipping over on a board.

This is a Dynamic Circular Avatar Gallery. It arranges a series of profile images into a perfect circle that smoothly expands when interacted with. Its function is to showcase user groups or team members in a compact, engaging format, using cutting-edge CSS math instead of JavaScript to handle complex radial positioning and dynamic item counting.

This is a Scroll-Driven Circular Typographic Scramble. It utilizes experimental CSS animation-timeline to bind complex trigonometric and geometric transitions directly to the user’s scrollbar. Its function is to create a highly engaging, interactive hero section where chaotic, scattered letters perfectly align into a readable circular sentence as the user scrolls down.

This is a Trigonometric Radial Popover Menu. It replaces heavy JavaScript positioning arrays with native CSS mathematics and the HTML Popover API. Its function is to reveal secondary actions in a circular layout on demand, expanding the interactive surface area without permanently cluttering the interface.

This is an Animated Movie Schedule Block component. It structures chronological event data (like cinema showtimes) into a visual grid. Its function is to condense information using a pure CSS hover interaction, where an image poster slides away to reveal structured metadata (genre, time, title) through intersecting animated panels.

This is an Interactive 3D Layered Text Wave Effect. It transforms a flat heading into a dynamic, multi-layered typographical stack that tracks cursor movement. Its function is to create immersive, interactive hero sections, replacing static typography with a playful spatial experience.

This is a Tumbling 3D Cubes Animation. It visualizes three interconnected, translucent cubes endlessly rolling across a grid floor in a synchronized sequence. Its function is to demonstrate complex spatial geometry and continuous kinetic motion using exclusively DOM nodes and stylesheets, replacing heavy WebGL libraries with pure CSS mathematics.

This is a Liquid Filling Heart Interaction. It visualizes a “pumping” effect by animating a fluid level inside a heart-shaped container. Its function is to serve as a playful, interactive state indicator — like a “like” button or health bar — that responds to user clicks with a simulated hydraulic fill and a 3D perspective jolt.

This Tectonic Stacked Tooltip creates a sophisticated, industrial-grade micro-interaction. Instead of a simple fade-in, the tooltip constructs itself from multiple sliding “plates” (slabs) that expand outward upon hovering. With its dark aesthetic, noise textures, and precise easing, it fits perfectly into sci-fi games, technical dashboards, or brutalist web designs.

This Nike Product Card Interaction is a dynamic UI component designed for e-commerce listings. It transforms a standard static product grid into an engaging experience. When a user hovers over a card, the product image rotates and shifts to make room for a vertical brand label that slides in from the side. This clever use of space allows for a clean initial view while revealing branding details on demand.

This Scroll-Driven Masonry Reveal creates a playful, tactile experience where content cards appear to be “dealt” onto the screen as the user scrolls. By leveraging the native CSS Scroll-driven Animations API, it achieves smooth, main-thread-free entrance effects without a single line of JavaScript. The layout adapts intelligently from 2 to 8 columns, making it a robust solution for image galleries or blog archives.

This Holographic 3D Interactive Card is a premium UI component inspired by rare physical trading cards. It features a sophisticated depth effect where the logo floats independently from the iridescent background, reacting dynamically to mouse movements or touch input. The use of modern CSS APIs ensures high-performance rendering of complex gradients and masks, creating a truly immersive “collectible” feel for digital assets.

This Interactive 3D Photo Cube creates a spatial navigation experience where a user explores six images mapped onto a cube by moving their cursor. Unlike standard sliders, it utilizes CSS 3D transforms orchestrated by GSAP to create a seamless, physics-like rotation. The snippet also features a “window-pane” parallax effect where the background images shift slightly inside their frames, adding an extra layer of depth.

This Vue FLIP Image Gallery showcases a high-performance way to animate layout changes that are typically expensive for the browser. When a user selects an image, it expands to fill a larger portion of the grid, while surrounding items gracefully rearrange themselves. This is achieved not by simple CSS transitions, but by the FLIP technique (First, Last, Invert, Play), ensuring buttery smooth 60fps animations even during complex DOM reflows.

This Tick-Tock Typographic Clock reimagines the traditional clock face by replacing ticks and numbers with words. Using a clever SCSS loop, it arranges 60 text elements (“TICK” for even seconds, “TOCK” for odd) in a perfect circle. A JavaScript interval updates the active class every second, creating a rhythmic, reading-based timekeeping experience.

A pure CSS bicycle illustration constructed from geometric primitives using absolute positioning and vmin units for responsiveness. conic-gradient simulates wheel spokes, transform: skewX shapes the frame, and inset box-shadow adds depth, while pseudo-elements efficiently duplicate components like wheels.

A pure CSS character illustration of Dipper Pines, constructed from geometric primitives using absolute positioning and vmin units for responsiveness. The design leverages border-radius, transform, clip-path masking, and pseudo-elements to shape detailed features like the signature pine tree hat and hair, all styled with CSS variables and a custom web font.

A pure CSS “pop-out” avatar effect utilizing CSS variables to orchestrate a scale transition.

A mesmerizing 3D animation of cascading playing cards fetched dynamically from the Deck of Cards API via JavaScript.

A playful kinetic typography animation where words sequentially crouch, leap with a flip, and land softly, simulating the physical action of “jumping to conclusions.”

An interactive 3D simulation of skateboarding tricks (Kickflip, Impossible, etc.) performed by a rotating card via CSS transforms and JavaScript.

A rectangular button smoothly shrinks into a circle, the text fades out, and an upward-pointing arrow begins to cyclically rise within it.

An interactive login form that performs a 360-degree 3D flip animation to seamlessly transition between vibrant, gradient-based color themes triggered by a JavaScript state manager.

A vertical CSS-only navigation menu where hovering triggers a smooth animation: the icon scales up and changes color while the text label fades out, emphasizing the visual symbol.

A stylized paper notepad To-Do list featuring a skew transformation and stack-effect shadows. Clicking checkboxes toggles a strikethrough style on handwritten list items via JavaScript class manipulation.

A fluid mobile prototype demonstrating state-driven navigation transitions and a 3D dashboard carousel powered by Swiper.js.

An animated vertical timeline where historical event cards slide in from alternating sides as they enter the viewport upon scrolling.

An analog clock with a mechanical ticking effect driven by cubic-bezier transitions and precise rotation logic.

A high-precision chronograph featuring a smooth sweeping hand with a dynamic gradient trail and sub-millisecond accuracy.

An elegant and responsive menu that saves space when collapsed and provides a smooth, delightful interaction experience upon opening.

An elegant and unusual content presentation where text and visuals interact dynamically, sliding past each other during transitions.

A self-playing image carousel that synchronizes the page’s background with the active slide.

A stylish, minimalist clock that runs in real-time, smoothly toggles themes, and combines a classic dial with a digital display.

An elegant, cinematic slider that allows users to “flip” through content with a sense of depth, drawing attention to the central item.

An impressive, smooth carousel that allows users to “flip” through images with a sense of spatial depth, reminiscent of the popular Apple Cover Flow interface.

On hover, letters scatter chaotically, creating a dynamic, interactive explosion of text without complex animation libraries.

A collection of 10 distinct hamburger menu animations, ranging from simple rotations to complex, multi-stage morphs.

A stacked “fan-style” gallery built with React, leveraging CSS sibling selectors to trigger complex 3D transforms on hover. Each card in the stack reacts dynamically: the hovered item scales up, while subsequent items shift and rotate, creating a fluid, cascading reveal effect without JavaScript animations.

A gamified task categorization UI built with React and TypeScript, featuring a continuously sliding conveyor belt of tasks.

A neumorphic digital clock featuring a vertical sliding mechanism reminiscent of slot machines.

A complex puzzle where each image fragment can be flipped or rotated in any direction, challenging the player’s spatial reasoning to reconstruct the original picture.

An interactive card stack that fans out into a deck-like display upon toggling. JavaScript handles the state transition by toggling classes, triggering CSS cubic-bezier transitions that rotate and translate the cards from a bottom-center origin, creating a smooth, elastic opening animation accompanied by a rotating navigation button.

Hovering over the grid triggers a light flare sweep, transforming the images from a distorted, stretched state into their sharp, original form, creating a futuristic transition effect.

An interactive 3D card selector featuring a dynamic parallax effect where cards rotate in perspective based on mouse coordinates. JavaScript calculates angular transforms and constraints for a ‘chef’ character that playfully follows the cursor along the card’s axis.

A volumetric 3D toggle switch orchestrated via the CSS Checkbox Hack and sibling combinators, requiring minimal JavaScript. The segmented background creates a cascading flip effect using rotateX and inline transition-delay, while keyframes drive two spheres in a complex orbital path through depth using translateZ and perspective to swap positions.

Experience a detailed, multi-stage SVG animation where a box elegantly morphs into a checkmark. The effect is a choreographed sequence of CSS transitions on transform and stroke, combined with JavaScript-driven attribute changes, creating a polished and satisfying micro-interaction.

This demo creates a captivating liquid wave illusion using a single ::before pseudo-element inside multiple overflow: hidden containers. The fluid motion is the result of two simultaneous @keyframes animations - one controlling top and the other transform: rotateZ.

This pagination component’s core logic is managed in SCSS, where the .active class (toggled by a minimal JavaScript snippet) triggers a transform: translateX() on a .pagination-current element, creating a fluid “sliding dot” effect. The user experience is further enhanced by a series of polished micro-interactions on the :hover and :active states, which use transform transitions with custom cubic-bezier timing functions to create subtle scaling and “squash and stretch” animations.

This demo uses a single scroll event listener to calculate the individual progress of each list item as it enters the viewport. The progress value is then passed to a CSS Custom Property, which drives a staggered transform: scale() and opacity animation for a fluid, app-like reveal effect.

This component leverages the native browser feature scroll-behavior: smooth to create a fluid scrolling animation between sections. This is triggered by anchor links, providing a simple and performant way to build a slideshow without any complex JavaScript animation libraries.

XState-powered drag & drop implementation with finite state machine. Features visual state transitions, smooth animations, and contextual feedback.

Pure CSS ripple animation with neumorphic styling. Checkbox-triggered wave sequence using scale transforms and opacity transitions.