176 CSS transform Examples (Page 2)

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.

An interactive 3D card effect where JavaScript tracks pointermove, calculates the relative cursor position, and passes it to --ratio-x and --ratio-y CSS variables, while CSS uses calc() to drive rotateX and rotateY.

An advanced “Like” button micro-animation based on CSS @property, where custom variables are used to animate the numbers and the icon.

Explore responsive calendar design featuring a detailed hover and click zoom effect, implemented through precise coordinate calculations to manipulate CSS transform based on the selected date’s index.

A mobile wallet interface in React and TypeScript where the card swipe mechanism is implemented with a CSS translateX transform - the position is calculated on-the-fly based on the active card’s index.

An implementation of a complex animated switcher in pure CSS, where a single line of JS is only used to toggle the .is-active class - the rest is the magic of transform and custom properties.

This interactive rating component stands out with three unique 3D effects, built using advanced Sass (loops, gradient randomization), - and showcases SVG facial animation via path morphing in pure JS.

Explore the technique of creating a three-line hamburger using a single <span> tag and two pseudo-elements, - which are then animated into an ‘X’ via a combination of CSS properties rotate(45deg) and translate.

This interactive toggle switch demonstrates advanced animation work, where delayed class toggling in jQuery coordinates the knob movement and a stylish “color fill” text effect, created in CSS using overflow: hidden; and pseudo-elements.

Explore how a GSAP timeline is used to create a complex movement sequence using keyframes and onComplete callbacks to ensure smooth and realistic transitions between poses. All control is implemented via keyboard and touch event handlers.

An interactive timeline where JS synchronizes CSS transform: translateX for scrolling, background-position for parallax, and classes for sprite animation.

Explore the powerful tandem of GSAP and CSS Variables, where to/fromTo with keyframes control SVG elements inside Radio/Checkbox/Switch. The animations utilize the feColorMatrix filter (the “Gooey” effect) and SVG transforms to create smoothly “flowing” shapes and stylish toggles.

An elegant pricing switcher in pure JS that changes prices by fetching them from data-* attributes - plus a bundle of slick CSS animations using transform.

This simple counter demonstrates clean vanilla JavaScript functionality: counter management, class switching for instant color scheme change based on the number’s sign. The stylistic focus is on “Soft UI” aesthetics.

This maze puzzle is implemented using pure JavaScript and CSS 3D transforms which tilt the maze, creating the illusion of gravity and ball movement. The code features complex collision physics for balls hitting walls and “rolling” around corners with precise mathematical calculations.

This Parallax effect with a “Hero” section is implemented purely via a jQuery scroll handler that directly manipulates the CSS properties opacity, transform: scale, and margin-top. The background image is fixed, which is critical for the effect.

This custom radio button UI employs pure CSS @keyframes and transform properties to create a dynamic, liquid-like squash-and-stretch animation upon selection - the smooth UI transition is managed by complex jQuery state logic that precisely adds and removes animation classes.

A sleek, animated segmented control using GSAP for smooth slide and a subtle 3D-like tilt effect on click, providing a polished micro-interaction.

This custom SVG cursor rotates dynamically based on the mouse’s velocity and direction, achieved by calculating the angle between the previous and current coordinates using JavaScript’s Math.atan2 and applying the rotation via CSS transform.

Dynamic visualization of John F. Kennedy’s speech, where each word is a separate element, creating a “running wave” effect using CSS transformations and a JavaScript setInterval.

Custom vertical range slider with a retro-futuristic design and a flickering display effect, achieved using a CSS transform on input[type

A stylish “pop-out” corner menu implemented with pure CSS for styling and JavaScript for toggle functionality, controlling the precise radial positioning of menu items using the transform: translate() property.

A visually engaging pixel heart animation created purely using an HTML ul/li structure and CSS @keyframes, where the “pop-in” effect is achieved through smooth transform: scale transitions.

A demonstration of the new CSS Scroll-Driven Animations (SDA) API, where the scroll position of the entire page directly drives a complex, scaling, and rotating grid of images, achieving a high-performance, engaging visual effect purely with CSS.

A dynamic image gallery built with React and TypeScript, featuring a complex photo-bar decomposition effect that uses CSS transforms and state management to create a seamless, cinematic slideshow.

A dynamic navigation menu replicating the Stripe pattern: Vanilla JS calculates the position and size, while CSS transforms ensure a smooth transition and scaling of the background between sections of varying sizes, creating a “living” popover effect.

A dynamic image skew effect in pure Vanilla JS, where the transformation angle directly depends on the page’s scroll velocity, providing unique and responsive visual feedback.

This is a fully functional analog clock where the 60 minute dashes and 12 hour numerals are dynamically generated using Vanilla JavaScript template nodes and precise angular calculation, demonstrating efficient DOM rendering for complex, repetitive UI elements.

Demonstrates applying a skewY transform to multiline text, showing how the preserve-3d property ensures the text block itself is skewed as a single plane, creating a seamless, angled effect across all lines.

A demonstration of a styled digital clock rendered as an interactive 3D cube created purely using CSS transformations (transform-style: preserve-3d), which smoothly shifts its perspective on hover.

A custom dropdown fully replacing the native <select>, featuring a unique 3D “unfolding” animation that simulates a dropping paper sheet. The implementation is based on pure, object-oriented JavaScript, ensuring full ARIA accessibility and keyboard navigation.

Explore a dual-interaction card where a 3D parallax responds to mouse movement, while a click triggers a “camera flash” and a comic-style text reveal. The hover effect uses throttled JS for performance, and the click animations are powered by GSAP.

A custom cursor that smoothly tracks the mouse pointer using the native Web Animations API and instantly scales/changes its Font Awesome icon when hovering over an interactive element with a data-type attribute.