29 CSS 3D Examples

About a code

Spirited Away Bathhouse - 3D CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

The Gift of CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Extra Touches

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

150ml of vanilla CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

3D Ice Cream Parlor in CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS in 3D in CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Bubbly

Pure CSS 3D bubbles.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

3D iMac - CSS Only

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Great Pyramid of Giza - 3D Model - Pure CSS

3D model of the Egyptian Great Pyramid of Cheops in Giza. Discovering the possibilities of 3D modeling with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Explode A Node: 3D Box Model

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Pure CSS 3D Shaded Rotating Golden

Make your own by changing vars on 1st line of Pug.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS 3D Guitar with 5 Texture Variation

CSS 3D Guitar is a guitar model, made possible using mask-image, background-image and transform properties. The design is created with <div> elements and is completely customizable through CSS Variables. Camera simulation and Control panel synchronization powered by a few lines of JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

3D Room - Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

3D Modern House - Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS Cab

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

3D Printer

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CasioPT-1.css

Vintage Casio PT-1 keyboard drawn entirely with HTML and CSS; using divs, gradients and box-shadows.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Town

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

3D Cube (CSS3 Transform)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Skeuomorphic Buttons

Skeuomorphic buttons with realistic 3D effect. Skeuomorphism was used on the earlier iPhones and was made popular by it as well for UI design. It got mostly deprecated by flat design, as skeuomorphic elements are harder to create, maintain and scale across different platforms.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

3D Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Pure CSS 3D

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

3D CSS Cube

CSS-Only 3D perspective cube using CSS path-clip.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Clip-Path 3D

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

3D HUD in Space - Pure CSS

A fun little experiment to create a HUD (head-up display) in pure CSS and animate it without using any JavaScript. Move your mouse to have the HUD follow. When removing the mouse it will default back to the top left position.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Pure CSS Isometric Towers

Some sweet 3D transforms on some cute purple divs.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS3 Timeline With 3D Effect

CSS3 gradient timeline with 3D effect when you hover div.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

About a code

Animated Anaglyph 3D Effect with CSS

Geometric shapes being animated in intervals with an anaglyph 3D effect using just CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Inifnite Corridor

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -