RSK World - 3D Transform Gallery | Pure CSS 3D | Flip Cards, Cube, Carousel | RSK World

CSS3 3D Transforms Gallery Showcase

3D Transform Gallery provides pure CSS 3D effects: flip cards, rotating cube, carousel, hover tiles, pyramid, card fan, prism, flip clock, parallax, cylinder, book stack, door, 3D text, frames, ribbon, accordion. Experiments: bent panel, rotating text, card reveal, folding card, stacked layers. Showcase: isometric grid, curtain, tunnel, dice, orb, badge, photo stack, flip counter. Bootstrap-style layout without Bootstrap. Customizer: accent, speed, radius, theme. Responsive, prefers-reduced-motion. By rskworld.in.

If you find this 3D Transform Gallery useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download 3D Gallery

3D Components

Flip cards, cube, carousel, tiles, perspective cards. Pure CSS 3D transforms, perspective, backface-visibility. No JavaScript for effects.

Flip cards – hover to flip front/back
Rotating cube – six faces, continuous animation
Carousel – rotating 3D carousel of items
Tiles – hover tilt and scale
Perspective cards – depth on hover
All driven by CSS variables (--cube-size, --card-width, etc.)
Responsive breakpoints: 576px, 768px, 992px
prefers-reduced-motion support

Project Structure & Files

Organized CSS and JS: variables, Bootstrap replica, theme, components, gallery/experiments/showcase styles, dist for portable use.

css/variables.css – design tokens, colors, theme
css/bootstrap-replica.css – grid, navbar, cards, buttons (no Bootstrap lib)
css/theme.css – layout, radius, anim speed
styles.css – flip cards, cube, carousel, tiles
css/gallery-extra.css – pyramid, fan, prism, flip clock, parallax, cylinder
css/experiments.css, css/showcase.css – experiments and showcase
main.js – theme, back-to-top, smooth scroll, copy buttons
js/customizer.js – accent, speed, radius, theme (localStorage)
dist/3d-gallery.css, dist/3d-gallery.js – portable for any site

Pages & Demos

Home (index), More (gallery), Experiments, Showcase, Downloads. Each with hero, sections, code blocks, and optional customizer.

index.html – hero, get started, flip/cube/carousel/tiles, customize
gallery.html – pyramid, card fan, prism, flip clock, parallax, cylinder, book stack, door, ribbon
experiments.html – bent panel, rotating text, card reveal, folding card, stacked layers
showcase.html – 35+ effects: isometric, curtain, tunnel, dice, orb, badge, photo stack, flip counter
downloads.html – compiled/minified assets, docs, data attributes
Copy-to-clipboard on all code blocks
Sticky nav, back to top, theme toggle

Customizer & Theme

100% customizable: accent color (6 presets), animation speed (0.5x–2x), border radius (0–24px), theme (Auto/Light/Dark). Settings in localStorage.

Customizer panel (gear icon) – accent, speed, radius, theme
Accent presets: blue, green, purple, orange, pink, teal
CSS variables override – see CUSTOMIZE.md
Theme toggle in navbar – light/dark, saved
No Bootstrap dependency – custom replica CSS
Scoped portable CSS under .rsk-3d-gallery

Technologies & Stack

Pure CSS3 (3D transforms, perspective, animations), vanilla JS (theme, scroll, customizer). No frameworks.

CSS3 – transform, perspective, transform-style: preserve-3d, backface-visibility
Keyframe animations – cube rotate, carousel spin
CSS variables – colors, sizes, duration, easing
Vanilla JS – theme toggle, back to top, smooth scroll, active nav, copy buttons
customizer.js – apply and persist accent, speed, radius, theme
dist build – cleancss, terser for minified assets
For learning CSS 3D and portable component reuse

What You Get

Full 3D gallery source: HTML pages, CSS (variables, replica, theme, components, gallery/experiments/showcase), JS, dist, docs.

Complete source – index, gallery, experiments, showcase, downloads
All CSS files – variables, bootstrap-replica, theme, components, ui, styles, responsive
Portable dist – 3d-gallery.css, 3d-gallery.js (and .min)
Documentation – README, USAGE, CUSTOMIZE, CHANGELOG, CONTRIBUTING, LICENSE
No build step – open HTML in browser or use dist on any site
Wrap content in .rsk-3d-gallery and link dist files
© 2026 RSK World. All rights reserved.

3D Gallery Application

Pure CSS 3D Transform Gallery with Bootstrap-style UI, customizer, and portable dist. No server required.

css-3d-gallery/ – main project folder
index.html, gallery.html, experiments.html, showcase.html, downloads.html
css/ – variables, bootstrap-replica, theme, components, ui, styles, responsive, customizer
js/ – customizer.js, utils.js; main.js in root
dist/ – 3d-gallery.css, 3d-gallery.js, .min versions
README.md – features, file map, usage
Open index.html in browser – no build step
Author: Molla Samser | rskworld.in

CSS & JS Files Included

Core styles and scripts: variables, layout, 3D components, responsive, customizer, theme and scroll logic.

variables.css – --perspective, --cube-size, --card-width, colors, duration
bootstrap-replica.css – container, row, col, navbar, cards, buttons
theme.css – --anim-speed, --radius-*, layout variables
styles.css – flip-card, cube, carousel, tiles, perspective cards
main.js – initTheme, toggleTheme, backToTop, smoothScroll, initCopyButtons
customizer.js – accent presets, speed/radius sliders, theme select, localStorage
responsive.css – breakpoints, scaled 3D components

Project Features

3D transformations, perspective effects, interactive animations, hover effects, theme toggle, sticky nav, back to top, customizer.

3D – flip cards, cube, carousel, tiles, pyramid, fan, prism, cylinder
Effects – 3D text, frames, ribbon, accordion, book stack, door
Showcase – isometric, curtain, tunnel, dice, orb, badge, photo stack, flip counter
Customizer – accent, speed, radius, theme (localStorage)
Responsive – 576px, 768px, 992px; prefers-reduced-motion
Portable – dist/ for use on any site under .rsk-3d-gallery
Bootstrap-style UI – no Bootstrap library