Skip to content

# Build fast, responsive 3D with pure CSS

Powerful pure CSS 3D transformations and animations. No Bootstrap library—custom layout by rskworld.in. Flip cards, cube, carousel, tiles and more.

Output

Hi
3D

Code

Include CSS and JS

    <link rel="stylesheet" href="dist/3d-gallery.css">
    <script src="dist/3d-gallery.js"></script>

Read the docs Download

Pure CSS · No Bootstrap library · rskworld.in · Downloads

## Get started any way you want

Use the compiled CSS and JS, or copy the full project. No build step required. Wrap 3D content in `class="rsk-3d-gallery"` so styles stay scoped.

### Include compiled files

Copy the `dist` folder to your project and add the CSS and JS.

Output

Front
Back

Code

HTML

    <link rel="stylesheet" href="path/to/dist/3d-gallery.css">
    <div class="rsk-3d-gallery">
      <div class="flip-cards"><div class="flip-card"><div class="flip-inner"><div class="flip-front">Front</div><div class="flip-back">Back</div></div></div></div>
    </div>
    <script src="path/to/dist/3d-gallery.js"></script>

Read installation docs

## 3D components, meet pure CSS

Flip cards, rotating cube, carousel, hover tiles and more—all with CSS only. No JavaScript for the 3D effects.

### Flip card

Output

Front
Back

Code

HTML

    <div class="flip-cards">
      <div class="flip-card">
        <div class="flip-inner">
          <div class="flip-front">Front</div>
          <div class="flip-back">Back</div>
        </div>
      </div>
    </div>

### Cube

Output

1
2
3
4
5
6

Code

HTML

    <div class="cube-scene">
      <div class="cube">
        <div class="cube-face front">1</div>
        <div class="cube-face back">2</div>
        <div class="cube-face right">3</div>
        <div class="cube-face left">4</div>
        <div class="cube-face top">5</div>
        <div class="cube-face bottom">6</div>
      </div>
    </div>

### Carousel

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>

### Tiles

Output

1
2
3
4
5
6

Code

HTML

    <div class="tiles-grid">
      <div class="tile"><span>1</span></div>
      <div class="tile"><span>2</span></div>
      <div class="tile"><span>3</span></div>
      <div class="tile"><span>4</span></div>
      <div class="tile"><span>5</span></div>
      <div class="tile"><span>6</span></div>
    </div>

More demos Experiments Showcase (35+ unique 3D)

## Customize with CSS variables

Override accent, background, and 3D sizing with CSS variables. Use the customizer panel (gear icon) on this site or set `data-theme="light"` for light mode.

Code

CSS

    .rsk-3d-gallery {
      --g3d-accent: #0d6efd;
      --g3d-cube-size: 120px;
      --g3d-duration: 0.4s;
    }

- Data attributes (theme toggle, back to top)
- USAGE.md — full variable list

## More pages

Explore extra 3D demos and full showcase. All by rskworld.in — no Bootstrap framework.

- More 3D demos — Pyramid, cylinder, fan, prism, flip clock, parallax
- Experiments — Fan, prism, flip clock, parallax, cylinder, bent panel
- Showcase — Card reveal, folding card, stacked layers, isometric grid, curtain, tunnel, dice
- Downloads — Compiled CSS & JS, docs

### Customize

Accent color
Animation speed1x
Border radius10px
Theme