190+ CSS transform Examples (Page 3)

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.