Skip to content

# Downloads

Get the compiled CSS and JS, or use the full source. By rskworld.in — no Bootstrap library used.

Home · rskworld.in · 2026

Download the 3D Transform Gallery compiled assets or copy the project. This site uses a custom layout (Bootstrap-style look) built with our own CSS — no Bootstrap framework — so you avoid any third-party licensing. All assets are under the rskworld.in brand.

## Compiled CSS and JS

Ready-to-use compiled code for 3D Transform Gallery (rskworld.in). Like Bootstrap: choose development (readable) or production (minified).

- CSS — flip cards, cube, carousel, tiles, responsive layout
- JS — theme toggle, back to top, smooth scroll, customizer

No Bootstrap dependency. All styles are scoped so they don’t conflict with your site.

Compiled (development): 3d-gallery.css 3d-gallery.js
Minified (production, like Bootstrap): 3d-gallery.min.css 3d-gallery.min.js

## Source files

Use the full project to get all source CSS (variables, theme, components, responsive) and HTML demos. Copy the entire project folder or clone the repo. No build step required for the pre-built `dist/` files.

- `dist/3d-gallery.css` / `dist/3d-gallery.min.css` — portable 3D styles (minified for production)
- `dist/3d-gallery.js` / `dist/3d-gallery.min.js` — portable JS (minified for production)
- `css/` — full source (variables, bootstrap-replica, theme, components, etc.)
- `index.html`, `gallery.html`, `experiments.html`, `showcase.html` — demo pages

## Include in your project

Copy the `dist` folder to your project, then add the CSS and JS. Wrap 3D content in `class="rsk-3d-gallery"` so styles stay scoped.

### Output

Result: flip card with link + script

Front
Back

### Code

HTML

    <!-- Production: use .min.css and .min.js (compressed like Bootstrap) -->
    <link rel="stylesheet" href="path/to/dist/3d-gallery.min.css">
    <!-- Your content -->
    <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.min.js"></script>

### Optional: theme toggle and back to top

Add buttons that work with the included script:

HTML

    <button type="button" data-3d-theme-toggle aria-label="Toggle theme">&#9728;</button>
    <button type="button" data-3d-back-to-top aria-label="Back to top">&#8593;</button>

## More examples

Cube and tiles in the same way: output first, then code with copy.

### Cube

Output

1
2
3
4
5
6

Code

HTML

    <div class="rsk-3d-gallery">
      <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>
    </div>

### Tiles

Output

1
2
3
4
5
6

Code

HTML

    <div class="rsk-3d-gallery">
      <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>
    </div>

## Data attributes (JS)

Supported by `dist/3d-gallery.js` (rskworld.in):

Attribute | Purpose
--- | ---
`data-3d-theme-toggle` | Button to switch light/dark (sets `data-theme` on `<html>`)
`data-3d-back-to-top` | Shows on scroll, scrolls to top
`data-3d-customizer-toggle` | Opens customizer panel
`data-3d-customizer-overlay` | Overlay for customizer
`data-3d-customizer-panel` | Customizer panel container
`data-3d-customizer-close` | Close button inside panel

## Documentation (.md)

All project documentation is in Markdown. Open in a text editor or on GitHub:

- README.md — Overview, features, project files
- USAGE.md — Use on any website, quick start, data attributes
- CUSTOMIZE.md — 100% customization, CSS variables
- CHANGELOG.md — Version history
- CONTRIBUTING.md — How to contribute
- LICENSE.md — MIT license

Author (2026): Molla Samser • rskworld.in • help@rskworld.in

### Customize

Accent color
Animation speed1x
Border radius10px
Theme