156 CSS transform examples

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.

An interactive password field that decouples its visual representation from the native input. JavaScript dynamically manages DOM elements for the dots via appendChild and remove(), while orchestrating a custom cursor by updating the --cursor-x CSS property to drive a transform.

This custom animated cursor implementation employs a dual-layer system where the inner dot follows mouse coordinates instantly via mousemove events, while the outer ring utilizes requestAnimationFrame with coordinate interpolation to create a smooth trailing effect.

A dual-panel form where JS acts as a simple state trigger, using classList.toggle to apply .animate classes. The entire complex transition is driven by CSS @keyframes, which choreograph separate transform and z-index animations for content and a background image.

A demonstration of a two-phase menu reveal animation - a fast transform: translateX shift and a slower width expansion are defined in a single transition property, creating a distinct visual effect.

A demonstration of step-by-step CSS transformation to create a cross effect: on :checked, the middle bar either gets opacity: 0 or scales down, while the top and bottom bars simultaneously rotate and translate.

A navigation menu with a neon glow and a complex hover effect. Icons and text use the CSS drop-shadow filter to create a glow effect, while the element’s color is controlled via an inline CSS variable --clr.

A digital-analog clock hybrid where JavaScript’s setInterval only updates a single CSS variable - --dRotate, while all the complex rotation and counter-rotation of the dials and numbers is handled by pure CSS transform.

A complex GSAP timeline simulating a cursor controlling a loader. The main feature is the use of .tweenTo(pos) to smoothly transition the loader to a set position within a spinning animation, synchronized with the cursor’s movement.