Transform

176 snippets

Browse transform examples — animations, layouts, typography, and visual effects. Filter the directory below.

css-transform

Snippets(176)

Gallery Hover Effect in React
A gallery hover effect in react built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
React Animated Circular Carousel
A react animated circular carousel built with modern frontend techniques for responsive and reusable UI.
Content Slider Carousel Frontend Ui Modern Design+1 more
Demo Code
React Infinity 3D Carousel
A react infinity 3d carousel built with modern frontend techniques for responsive and reusable UI.
Content Slider Carousel Frontend Ui Modern Design+1 more
Demo Code
React Phone with Credit Card Selector
A react phone with credit card selector built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Content Card Card Component+1 more
Demo Code
The Last Duel Movie Trailer But It's Cats Gallery
A the last duel movie trailer but it's cats gallery built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Webpage Hero Header Scroll Effects
A webpage hero header scroll effects built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Little Gallery
A little gallery built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Pure CSS 3D David Eye
A pure css 3d david eye built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Rotating Puzzle
A rotating puzzle built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Tilting Maze Game with Complex Physics
A tilting maze game with complex physics built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Folding Select Dropdowns
A folding select dropdowns built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Animated Ratings Component
A animated ratings component built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Corner Pop-Out Menu
A corner pop-out menu built with modern frontend techniques for responsive and reusable UI.
Menu Ui Navbar Frontend Ui Modern Design+1 more
Demo Code
Stripe Style Main Navigation Mega Menu
A stripe style main navigation mega menu built with modern frontend techniques for responsive and reusable UI.
Menu Ui Navbar Frontend Ui Modern Design+1 more
Demo Code
Manual Loader with GSAP Timeline
A manual loader with gsap timeline built with modern frontend techniques for responsive and reusable UI.
Loading Animation Css Loader Frontend Ui Modern Design+1 more
Demo Code
Interactive Skateboard Loading Animation
A interactive skateboard loading animation built with modern frontend techniques for responsive and reusable UI.
Loading Animation Css Loader Frontend Ui Modern Design+1 more
Demo Code
Photo Gallery with a Comic Touch
A photo gallery with a comic touch built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Vanilla JS Skew Images on Scroll
A vanilla js skew images on scroll built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Password Error and Success Animation
A password error and success animation built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Drag and Drop State Machine
A drag and drop state machine built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Direction-Aware SVG Cursor
A direction-aware svg cursor built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
CSS Clock (Braun x Paul Smith Style)
A css clock (braun x paul smith style) built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Animated Spinning SVG Checkbox
A animated spinning svg checkbox built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Interactive 3D Tilt Hover Effect
A interactive 3d tilt hover effect built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
JFK Speech Text Wave Animation
A jfk speech text wave animation built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Animated Power-Up Button
A animated power-up button built with modern frontend techniques for responsive and reusable UI.
Call To Action Frontend Ui Modern Design Ui Controls+2 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+
Features
GSAP Timelines, Staggered Shadow Effect, Rotational Animation
Custom 3D Slider
A custom 3d slider built with modern frontend techniques for responsive and reusable UI.
Content Slider Carousel Frontend Ui Modern Design+1 more
Demo Code
Double Vertical Slider
A double vertical slider built with modern frontend techniques for responsive and reusable UI.
Content Slider Carousel Frontend Ui Modern Design+1 more
Demo Code
Smooth Parallax Image Scroll Gallery
A smooth parallax image scroll gallery built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, SCSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 108+, Edge 108+, Firefox 101+, Safari 15.4+
Features
Smooth Scroll, Scroll Tracking, Parallax Offset
Theme Clock
A theme clock built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Log In and Sign Up Forms with Fingerprint
A log in and sign up forms with fingerprint built with modern frontend techniques for responsive and reusable UI.
Form Elements Frontend Ui Modern Design User Input+1 more
Demo Code
Physics Milestones Timeline
A physics milestones timeline built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
React Animated Custom Cursor
A react animated custom cursor built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Stacked Card Pull-Down Navigation
A stacked card pull-down navigation built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Content Card Card Component+1 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 86+, Edge 86+, Firefox 85+, Safari 14+
Features
Card Deck UI, Staggered Animation, Dark Mode
Stopwatch
A stopwatch built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Sliding List with Scroll-Driven Animations
A sliding list with scroll-driven animations built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Animated UI Radio Button with CSS Keyframes
A animated ui radio button with css keyframes built with modern frontend techniques for responsive and reusable UI.
Call To Action Frontend Ui Modern Design Ui Controls+2 more
Demo Code
Gender Toggle Button with Bounce Effect
A gender toggle button with bounce effect built with modern frontend techniques for responsive and reusable UI.
Call To Action Frontend Ui Modern Design Ui Controls+2 more
Demo Code
Vue FLIP Image Gallery
A vue flip image gallery built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, SCSS, TypeScript
Difficulty
Advanced
Browser support
Chrome 80+, Edge 80+, Safari 14+, Firefox 90+
Features
FLIP Animation, Grid Layout, Interactive Selection, Hardware Acceleration
Click-to-Zoom Calendar
A click-to-zoom calendar built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Scroll-Driven Jigsaw Puzzle Assembler
A scroll-driven jigsaw puzzle assembler built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, Sass, JavaScript
Difficulty
Advanced
Browser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+
Features
Scroll-Driven Animation, Drag-and-Drop Upload, Dynamic Math Calculations, Responsive Layout
Real-time Clock
A real-time clock built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Multi-Card Spotlight Effect
A multi-card spotlight effect built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Content Card Card Component+1 more
Demo Code
Scrambling Letter Effect on Hover
A scrambling letter effect on hover built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Soft UI Counter Component
A soft ui counter component built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Image Carousel
A image carousel built with modern frontend techniques for responsive and reusable UI.
Content Slider Carousel Frontend Ui Modern Design+1 more
Demo Code
Magic Todo List
A magic todo list built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Sliding Dot Pagination
A sliding dot pagination built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Animated Navigation
A animated navigation built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Side Navigation with Icons
A side navigation with icons built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Animated Menu Bar with Hamburger
A animated menu bar with hamburger built with modern frontend techniques for responsive and reusable UI.
Menu Ui Navbar Frontend Ui Modern Design+1 more
Demo Code
CSS Hamburger Click Effect
A css hamburger click effect built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
CSS Hamburger Icons
A css hamburger icons built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Checkbox Hamburger Menu Animation
A checkbox hamburger menu animation built with modern frontend techniques for responsive and reusable UI.
Menu Ui Navbar Frontend Ui Modern Design+1 more
Demo Code
Staggered Animated Hamburger Toggle Button
A staggered animated hamburger toggle button built with modern frontend techniques for responsive and reusable UI.
Call To Action Frontend Ui Modern Design Ui Controls+2 more
Demo Code
Technologies
HTML, CSS, Babel
Difficulty
Intermediate
Browser support
Chrome 99+, Edge 99+, Firefox 97+, Safari 15.4+
Features
Staggered Motion, ARIA Support, Custom Easing, Elastic Transition
CSS3 Weather Widget
A css3 weather widget built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Sliding Theme Toggle Sidebar Menu
A sliding theme toggle sidebar menu built with modern frontend techniques for responsive and reusable UI.
Menu Ui Navbar Frontend Ui Modern Design+1 more
Demo Code
Technologies
HTML, SCSS, JavaScript
Difficulty
Beginner
Browser support
Chrome 59+, Edge 79+, Firefox 52+, Safari 10.1+
Features
Sliding Toggle, Theme Switcher, Custom Scrollbar
Periodic Table
A periodic table built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Periodic Table of Type CSS Grid
A periodic table of type css grid built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
2011 - Greetings Poster B - Haguruma Envelope. Shinnoske Design
A 2011 - greetings poster b - haguruma envelope. shinnoske design built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Netflix Logo
A netflix logo built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Pure CSS Circles Infographic
A pure css circles infographic built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Bicycle
A bicycle built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Dipper Pines from Gravity Falls
A dipper pines from gravity falls built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Animated SVG Weather Icons
A animated svg weather icons built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Coverflow 3D Effect with CSS
A coverflow 3d effect with css built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Reflection with Progressive Blur in CSS
A reflection with progressive blur in css built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Smooth Scroll Image Gallery with Anchor Links
A smooth scroll image gallery with anchor links built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Digital-Analog Dial Clock
A digital-analog dial clock built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
PureCalc
A purecalc built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
CSS Thumbnail Transition Effects
A css thumbnail transition effects built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Grid Lightbox Gallery Effect
A grid lightbox gallery effect built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, SCSS, JavaScript
Difficulty
Beginner
Browser support
Chrome 76+, Edge 79+, Firefox 103+, Safari 13+
Features
Dense Grid, Focus Trap
Flyer Design #01
A flyer design #01 built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Animated Day/Night Toggle Switch
A animated day/night toggle switch built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Pure CSS Star Rating from 0 to 8 with Colored Points of the Star
A pure css star rating from 0 to 8 with colored points of the star built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Pure CSS Expanding Search
A pure css expanding search built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Custom Range Slider
A custom range slider built with modern frontend techniques for responsive and reusable UI.
Content Slider Carousel Frontend Ui Modern Design+1 more
Demo Code
Pop-Up Overlay
A pop-up overlay built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Subscribe Email Form
A subscribe email form built with modern frontend techniques for responsive and reusable UI.
Form Elements Frontend Ui Modern Design User Input+1 more
Demo Code
Animated Sign-In Form with Theme Switcher
A animated sign-in form with theme switcher built with modern frontend techniques for responsive and reusable UI.
Form Elements Frontend Ui Modern Design User Input+1 more
Demo Code
Cube Login Form
A cube login form built with modern frontend techniques for responsive and reusable UI.
Form Elements Frontend Ui Modern Design User Input+1 more
Demo Code
Sign Up and Sign In Toggle Form
A sign up and sign in toggle form built with modern frontend techniques for responsive and reusable UI.
Form Elements Frontend Ui Modern Design User Input+1 more
Demo Code
Wheel Timeline. Pure CSS
A wheel timeline. pure css built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
CSS3
Difficulty
Advanced
Features
No JavaScript, Radial Layout, CSS State Management
Responsive
Yes
Box Preloader
A box preloader built with modern frontend techniques for responsive and reusable UI.
Loading Animation Semantic Html Css Loader Html+3 more
Demo Code
Technologies
HTML, CSS
Difficulty
Beginner
Features
CSS Animation, Geometric Shape
Responsive
Yes
Comic Director Splash Animation
A comic director splash animation built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
Intermediate
Features
Hardware accelerated, Sequential reveal, Custom easing
Responsive
Yes
Ribbon Design
A ribbon design built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS3
Difficulty
Intermediate
Features
Pseudo-elements, CSS Transform
Responsive
Yes
Only CSS Loading Animation
A only css loading animation built with modern frontend techniques for responsive and reusable UI.
Loading Animation Css Loader Html Frontend Ui+3 more
Demo Code
Technologies
CSS, SCSS
Difficulty
intermediate
Features
Pure CSS, Percentage Counter, Loop-generated frames
Responsive
Yes
Pure CSS Panels
A pure css panels built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS3, HTML5
Difficulty
Beginner
Features
No JavaScript, CSS Animations, Target Selector
Responsive
Yes
CSS Circle Notifications
A css circle notifications built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS3, HTML5
Difficulty
easy
Features
Pure CSS, Hover Effects, Keyframe Animations
Responsive
Yes
Color Swatch
A color swatch built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
SASS, CSS3
Difficulty
Intermediate
Features
Hover Animation, Radial Menu, CSS Variables
Responsive
Yes
Shuffling Effect in Pure CSS
A shuffling effect in pure css built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS Grid, CSS :has()
Difficulty
Intermediate
Features
Pure CSS, No JavaScript, Animated Transitions
Stacked Poetic Cards
A stacked poetic cards built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS, HTML
Features
3D Transform, CSS :has() selector, Radio Button Hack
Responsive
Yes
E-Commerce Card
A e-commerce card built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Features
hover effects, box-shadow animation, product layout
Responsive
Yes
Material Design: Profile Card
A material design: profile card built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS3, HTML5
Difficulty
Advanced
Features
Sequential Reveal, Shape Morphing, Material Design
Responsive
Yes
Animated Gallery Thumbnails
A animated gallery thumbnails built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Web Components
Demo Code
Difficulty
intermediate
Features
hover animations, diagonal clip-path effect, smooth transitions
Responsive
Yes
Color Palette
A color palette built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS, HTML
Difficulty
Beginner
Features
Hover Animations, Responsive Grid, Color Palette Display
Responsive
Yes
Business Card Concept
A business card concept built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
intermediate
Features
hover animations, smooth transitions, transform effects
Responsive
Yes
Blog Card
A blog card built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
Intermediate
Features
box-shadow depth, absolute positioning, centered images
Responsive
Yes
Animated Movie Schedule Blocks
A animated movie schedule blocks built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
Haml, SCSS
Difficulty
Intermediate
Browser support
Chrome 36+, Edge 12+, Firefox 16+, Safari 9+
Features
Sliding Panels, SCSS Theming, Responsive Grid
Responsive
Yes
Nike Product Card Interaction
A nike product card interaction built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 57+, Edge 16+, Firefox 52+, Safari 10.1+
Features
Hover Animation, CSS Transform, Grid Layout, Product Card
Responsive
Yes

Page 1 of 2

related hubs