Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips

3D & Depth

3D effects, spatial depth, parallax and motion path.

How to add depth to your interfaces? These 50 3D effects use CSS perspective, 3D transforms and WebGL to create immersive experiences: flip cards, depth carousels, 3D parallax and interactive WebGL scenes. From simple flip cards to advanced 3D rendering.

Front
Back
Right
Left
Top
Bottom

Rotating Cube

Interactive 3D cube that follows the mouse movement.

CSS 3D Interactive
Hover Me
Flipped!

Card Flip 3D

Full card flip with realistic 3D effect.

CSS 3D Hover
Move Mouse

Perspective Tilt

Element that tilts in 3D based on cursor position.

JS 3D Mouse
Secret!
Hover to Unfold
Panel

Folding Panel

Panel that unfolds like paper on hover.

CSS 3D Fold

3D Button Press

Button with realistic 3D press effect.

CSS 3D Button
3D

Layered Parallax 3D

Multiple layers with 3D depth effect.

JS 3D Parallax
3D TEXT

Rotating Text

Text with continuous animated 3D rotation.

CSS 3D Text
Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4

3D Menu Stack

Stacked menu with depth effect on hover.

CSS 3D Menu

Isometric Grid

Isometric grid with interactive 3D cubes.

CSS 3D Isometric
1
2
3
4
5
6

Cube Auto-Rotation

3D cube with continuous automatic rotation.

CSS 3D Auto
Layer 1
Layer 2
Layer 3
Front

Parallax Depth Layers

Stacked layers with 3D depth effect.

CSS 3D Depth
Hover
Me

Fold Effect Card

Card that folds inward on hover.

CSS 3D Fold
Secret!
Open Me

Door Open Effect

3D door that opens to reveal the content.

CSS 3D Door
Page 1
Page 2
Page 3

Page Turn Effect

Page turning effect on hover.

CSS 3D Book
A
B
C
D
E
F

Prism Rotation

Hexagonal prism with automatic rotation.

CSS 3D Prism
1
2
3

Floating Elements 3D

Floating elements with animated 3D rotation.

CSS 3D Float

3D Button Press V2

3D button with perspective press effect.

CSS 3D Button
Hover Me

Shadow Perspective

Card with realistic 3D shadow that reacts on hover.

CSS 3D Shadow

Mouse Parallax Scene

Multi-layered scene (stars, moon, mountains, trees) reacting to cursor at different speeds.

JS Mouse Parallax

Depth Card

Hover to explore

♦

Depth Card

Card with layered elements (background, text, icon) separating in 3D on hover with translate3d.

CSS 3D Hover
Nav
★
Button
♥
Tag

Floating Elements

UI elements floating and oscillating as if weightless with different animation durations.

CSS Animation Float
Layer 1
Layer 2
Layer 3
Layer 4

Perspective Scroll

Content at different Z depths creating a space flight effect with CSS perspective and translateZ.

CSS Perspective 3D

Layered Paper

Stack of paper sheets with realistic shadows and slight rotation, spreading out on hover.

CSS Hover Shadow

Isometric Grid

Interactive isometric grid where blocks rise and fall based on cursor proximity.

JS Mouse Isometric
Background
Focus
Foreground

Depth of Field

Foreground/background with blur that changes focus on hover, simulating depth of field.

CSS Blur Hover
Floor
Wall
Side
■

3D Room

Content placed on the floor and walls of a CSS perspective room that rotates on drag.

JS 3D Drag
♦
★
♥

Floating Shadows

Elements with shadows moving independently as if a dynamic light source is moving.

JS Mouse Shadow

Orbit Circle

Elements orbiting around a central point with offset-path: circle(). Varied speeds and directions.

CSS offset-path Orbit

SVG Path Follow

Glowing dot following an SVG curve with a ghost trail echoed with a time offset.

CSS SVG Trail

Bezier Curve

Ball following a cubic Bezier curve with visible control points and ground shadow.

CSS Bezier Animation

Infinity Loop

Dot following a lemniscate-shaped (∞) path with a glowing trail halo.

CSS Path Infinity

Spiral Path

Dot traveling along an outward-expanding spiral via a complex SVG path.

CSS Spiral SVG

Bounce Path

Ball following a bounce trajectory with progressively decreasing arcs.

CSS Bounce Physics

Wave Path

Three dots of different sizes and colors following a sine wave with time offsets.

CSS Wave Stagger

Multi Orbit

Miniature solar system with 5 planets on 3 orbits at varied speeds and distances.

CSS Orbit System

Path Drawing

SVG path that draws itself with stroke-dashoffset while a dot follows the same trajectory.

CSS SVG Draw

Rollercoaster

Cart following a rollercoaster track with offset-rotate: auto for natural orientation.

CSS offset-rotate Path

AR/VR & WebXR

📊Stats
⚙Settings
👤Profile

Spatial UI Panels

Floating UI panels arranged in an arc in 3D space with parallax effect.

CSS 3D Perspective UI

360 Viewer

Interactive panorama with drag-to-rotate for an immersive 360-degree view.

JS Drag Panorama

AR Object Placer

3D object placement simulation on a surface with detection grid.

CSS AR Placement

Holographic Display

Holographic display with scanline, prismatic reflections and light pulsation.

CSS Hologram Animation
🎵

Spatial Audio Dir

3D audio directional indicator with concentric waves and moving sound source.

CSS Audio Spatial

Portal Effect

Portal to another dimension with rotation, particles and light pulsation.

CSS JS Portal
Select
Grab
Point

Hand Tracking UI

Gesture-reactive interface simulated with a custom cursor following the mouse.

JS Gestures UI
🌎
⭐
💎

Immersive Depth Scroll

Z-depth layers that react to mouse movement for an immersive parallax effect.

CSS 3D Parallax Depth

XR Environment

Complete immersive scene with starry skybox, floating 3D objects and perspective grid floor.

CSS JS Environment

Frequently Asked Questions

How to create a flip card in CSS? +

Use a container with perspective:1000px, an inner card with transform-style:preserve-3d and transition. The back face has backface-visibility:hidden and rotateY(180deg). On hover, the card rotates 180deg.

What is the difference between perspective and 3D transform? +

perspective defines the distance between the viewer and the element -- it goes on the PARENT. 3D transforms (rotateX, rotateY, translateZ) deform the element itself. The smaller the perspective, the more pronounced the effect.

How to create a 3D carousel in CSS? +

Place items in a circle with rotateY and translateZ in a container with transform-style:preserve-3d. Each item has rotateY(i * 360/n deg) translateZ(radius). Animate the container rotation to scroll through.

Is WebGL necessary for web 3D effects? +

Not for most effects: CSS perspective + transforms are sufficient for cards, carousels and parallax. WebGL (via Three.js) is only necessary for complex 3D scenes: models, textures, lights, physics.

Are CSS 3D effects performant? +

Yes. 3D transforms are processed by the GPU. Avoid combining transform with filter on the same element. Limit the number of elements with preserve-3d as each 3D layer consumes GPU memory.

Similar Categories

📜

Scroll & Parallax

30 effects

 🎬

Transitions

50 effects

 ✨

Atmosphere

50 effects