142 CSS transform examples
Unlock dynamic visual effects with these CSS transform examples. From rotating icons and scaling buttons to translating elements on hover, this collection demonstrates how transform can bring movement and depth to your designs with just a few lines of CSS.
Last updated:
Animated Sign-In Form with Theme Switcher
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.
Side Navigation with Icons
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.
To-Do List
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.
Log In and Sign Up Forms with Fingerprint
A fluid mobile prototype demonstrating state-driven navigation transitions and a 3D dashboard carousel powered by Swiper.js.
Physics Milestones Timeline
An animated vertical timeline where historical event cards slide in from alternating sides as they enter the viewport upon scrolling.
Real-time Clock
An analog clock with a mechanical ticking effect driven by cubic-bezier transitions and precise rotation logic.
Stopwatch
A high-precision chronograph featuring a smooth sweeping hand with a dynamic gradient trail and sub-millisecond accuracy.
Animated Navigation
An elegant and responsive menu that saves space when collapsed and provides a smooth, delightful interaction experience upon opening.
Double Vertical Slider
An elegant and unusual content presentation where text and visuals interact dynamically, sliding past each other during transitions.
Image Carousel
A self-playing image carousel that synchronizes the page’s background with the active slide.
Theme Clock
A stylish, minimalist clock that runs in real-time, smoothly toggles themes, and combines a classic dial with a digital display.
3D Slider
An elegant, cinematic slider that allows users to “flip” through content with a sense of depth, drawing attention to the central item.
Custom 3D Slider
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.
Scrambling Letter Effect on Hover
On hover, letters scatter chaotically, creating a dynamic, interactive explosion of text without complex animation libraries.
CSS Hamburger Icons
A collection of 10 distinct hamburger menu animations, ranging from simple rotations to complex, multi-stage morphs.
Little Gallery
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.
Magic Todo List
A gamified task categorization UI built with React and TypeScript, featuring a continuously sliding conveyor belt of tasks.
Neu Times!
A neumorphic digital clock featuring a vertical sliding mechanism reminiscent of slot machines.
Rotating Puzzle
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.
Rotating Navigation
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.
Image Peeling Hover Effect
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.
Interactive 3D Tilt Hover 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.
Volumetric 3D CSS Toggle Switch
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.
Animated Spinning SVG Checkbox
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.
Pure CSS Liquid Wave Illusion
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.
Sliding Dot Pagination
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.
Sliding List with Scroll-Driven 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.
Smooth Scroll Image Gallery with Anchor Links
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.
