CSS 3D Cube Animator - salivity.github.io

auto_awesome Presets:

file_upload Import JSON

Active Animation Drag to inspect

200px • 12s • Ease-in-out

integration_instructions

Embed Ready

Self-contained HTML & CSS code snippet

Select Face to Edit:

Side: FRONT

Custom Image URL Leave blank to use solid background color

Target Link URL (href) Makes this face clickable

Face Label / Title

Link Target

Background Color

Text Color

Face Opacity: 0.95

code Generated Standalone Code

Copy and paste directly into any HTML document or web platform. Pure CSS 3D transforms without external dependencies.

Generating CSS 3D Cube code...

Includes HTML markup, CSS keyframes, 3D preserve context, and links for each face.

help_outline Information Guide

Frequently Asked Questions

Everything you need to know about CSS 3D animated cubes, custom images, hyperlinking, and deployment.

view_in_ar How does CSS 3D transform rendering work without WebGL?

Modern web browsers use the CSS property transform-style: preserve-3d in conjunction with a defined perspective on the parent container to compute an authentic 3D matrix. Each side of the cube is positioned using coordinate translations (translateZ) and rotations (rotateX, rotateY) to form a complete 6-sided polyhedron rendered natively by the GPU.

link Can each side of the 3D cube link to different external web addresses?

Yes, each face of the generated cube is encapsulated in an HTML anchor element with standard href and target attributes. Because CSS 3D transforms preserve DOM interactivity and pointer events, visitors can click directly on any visible side during rotation or when paused.

image What image formats and dimensions are recommended for cube faces?

Square aspect ratio images (1:1) in modern formats such as WebP, PNG, SVG, or JPEG yield optimal visual clarity. Square dimensions such as 400x400 pixels or 600x600 pixels ensure high-resolution rendering without letterboxing or distortion on retina displays.

favorite How is the pulsating animation achieved simultaneously with rotation?

To prevent transform collision and gimbal locks in CSS, the architecture separates rotation from pulsation into two nested containers. The outer container handles the rhythmic 3D scaling pulse, while the inner element executes the continuous angular rotation keyframe, delivering smooth 60fps compounding motion.

speed How can the rotation speed and trajectory direction be adjusted?

The studio offers dynamic controls for cycle duration ranging from rapid spins (1 second) to gentle ambient rotations (40 seconds), along with selectable trajectory models including turntable Y-axis, tumbling X-axis, diagonal corkscrew, and multi-axis isometric rolls.

file_download How do JSON configuration export and import work?

Clicking "Export JSON" aggregates all settings—including geometry dimensions, face URLs, color palettes, speeds, and pulsation parameters—into a downloadable cube-config.json file. You can load this file back into the application at any time to instantly restore your layout.

integration_instructions Can the copied CSS code snippet run without any external libraries?

Yes, the code generated by this tool is 100% pure HTML and CSS with embedded vendor prefixes and keyframe rules. It requires no React, no Three.js, no Tailwind CDN, and no external JavaScript runtime, making it universally compatible with any CMS, Shopify, WordPress, or static HTML site.

touch_app Is the 3D animated cube accessible and responsive on mobile devices?

The generated cube is fully responsive. Because dimensions are calibrated mathematically based on half of the cube width (calc(size / 2)), you can scale the cube seamlessly across phone, tablet, and desktop screens with full touch support.

pause_circle Does the animated cube support pause on hover?

Yes, the tool features an optional animation-play-state: paused on :hover setting. When enabled, users hovering their mouse over the cube can freeze it mid-spin to read content or click hyperlinks without chasing moving elements.

brush Can I customize face transparency, edge borders, and glow effects?

Every face can have custom opacity, background tinting, border thicknesses, corner radii, and edge glow effects. Setting high opacity allows translucent crystal glass looks where back-facing sides remain partially visible as the cube spins.