Skip to content

# More 3D demos

Pyramid, cylinder, card fan, prism, flip clock, parallax, book stack, door, carousel, ribbon and more. Pure CSS by rskworld.in.

Home · rskworld.in · 2026

## 3D Pyramid

Rotating pyramid built with CSS 3D transforms.

Output

Code

HTML

    <div class="pyramid-scene">
      <div class="pyramid">
        <div class="pyramid-face f1"></div>
        <div class="pyramid-face f2"></div>
        <div class="pyramid-face f3"></div>
        <div class="pyramid-face f4"></div>
      </div>
    </div>

## 3D Card Fan

Hover to spread the fan.

Output

1
2
3
4
5

Code

HTML

    <div class="card-fan">
      <div class="fan-card">1</div>
      <div class="fan-card">2</div>
      <div class="fan-card">3</div>
      <div class="fan-card">4</div>
      <div class="fan-card">5</div>
    </div>

## Rotating Prism

Triangular prism with 3D rotation.

Output

X
Y
Z

Code

HTML

    <div class="prism-scene">
      <div class="prism">
        <div class="prism-face">X</div>
        <div class="prism-face">Y</div>
        <div class="prism-face">Z</div>
      </div>
    </div>

## Flip Clock Digit

Hover to flip.

Output

5
5

Code

HTML

    <div class="flip-clock-scene">
      <div class="flip-digit">
        <div class="digit-inner">
          <div class="digit-top">5</div>
          <div class="digit-bottom">5</div>
        </div>
      </div>
    </div>

## Parallax 3D Layers

Hover to shift depth.

Output

Back
Mid
Front

Code

HTML

    <div class="parallax-box">
      <div class="parallax-layer back">Back</div>
      <div class="parallax-layer mid">Mid</div>
      <div class="parallax-layer front">Front</div>
    </div>

## Cylinder Rings

Rotating rings in 3D.

Output

1
2
3
4
5

Code

HTML

    <div class="cylinder-scene">
      <div class="cylinder">
        <div class="ring">1</div>
        <div class="ring">2</div>
        <div class="ring">3</div>
        <div class="ring">4</div>
        <div class="ring">5</div>
      </div>
    </div>

## 3D Book Stack

Hover a card to lift it.

Output

A
B
C
D

Code

HTML

    <div class="book-stack">
      <div class="stack-item"><div class="face front">A</div><div class="face right"></div></div>
      <div class="stack-item"><div class="face front">B</div><div class="face right"></div></div>
      <div class="stack-item"><div class="face front">C</div><div class="face right"></div></div>
      <div class="stack-item"><div class="face front">D</div><div class="face right"></div></div>
    </div>

## 3D Door

Hover to open the door.

Output

Open
rskworld.in

Code

HTML

    <div class="door-scene">
      <div class="door-panel">
        <div class="door-inner">
          <div class="door-front">Open</div>
          <div class="door-back">Back</div>
        </div>
      </div>
    </div>

## 3D Carousel

Rotating carousel of items.

Output

A
B
C
D
E
F

Code

HTML

    <div class="carousel-scene">
      <div class="carousel">
        <div class="carousel-item">A</div>
        <div class="carousel-item">B</div>
        <div class="carousel-item">C</div>
        <div class="carousel-item">D</div>
        <div class="carousel-item">E</div>
        <div class="carousel-item">F</div>
      </div>
    </div>

## Floating 3D Cards

Cards with float animation. Hover to focus.

Output

CSS
3D
2026

Code

HTML

    <div class="floating-cards">
      <div class="floating-card"><div class="float-inner">CSS</div></div>
      <div class="floating-card"><div class="float-inner">3D</div></div>
      <div class="floating-card"><div class="float-inner">2026</div></div>
    </div>

## 3D Text

Hover to flatten and scale.

Output

### rskworld

Code

HTML

    <div class="text-3d-scene">
      <h3 class="text-3d">rskworld</h3>
    </div>

## 3D Photo Frames

Hover a frame to tilt.

Output

1
2
3

Code

HTML

    <div class="frames-row">
      <div class="frame-3d"><div class="frame-inner"><span class="frame-placeholder">1</span></div></div>
      <div class="frame-3d"><div class="frame-inner"><span class="frame-placeholder">2</span></div></div>
      <div class="frame-3d"><div class="frame-inner"><span class="frame-placeholder">3</span></div></div>
    </div>

## 3D Accordion Stack

Hover stack to fan; hover a card to bring forward.

Output

One
Two
Three
Four

Code

HTML

    <div class="accordion-stack">
      <div class="accordion-card"><span>One</span></div>
      <div class="accordion-card"><span>Two</span></div>
      <div class="accordion-card"><span>Three</span></div>
      <div class="accordion-card"><span>Four</span></div>
    </div>

## 3D Ribbon

Tilted ribbon banner. Hover to lift.

Output

Pure CSS 3D • rskworld.in

Code

HTML

    <div class="ribbon-3d-scene">
      <div class="ribbon-3d"><span>Pure CSS 3D • rskworld.in</span></div>
    </div>

### Customize

Accent color
Animation speed1x
Border radius10px
Theme