JavaScript

No JavaScript, No Three.js: A Pure CSS 3D Rotating Cube That Impressed My Coworkers

By 默_笙 · Jun 25, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

For Western developers who reflexively reach for Three.js or Canvas for any 3D UI, this is a reminder that CSS 3D is production-ready, GPU-accelerated, and often simpler. It challenges the assumption that 3D effects require JavaScript, and it shows how foundational CSS knowledge can eliminate dependencies — a valuable skill for performance-conscious frontend work.

Summary

A developer shares how they built a fully functional 3D rotating cube using nothing but CSS, surprising coworkers who assumed Three.js or Canvas was involved. The tutorial walks through the two essential CSS properties for 3D: `perspective` (which sets the viewing distance and controls the intensity of the 3D effect) and `transform-style: preserve-3d` (which tells the browser to keep child elements in 3D space rather than flattening them). Six faces are positioned using a combination of `translate` and `rotate` transforms, and a `@keyframes` animation makes the cube spin continuously around the Y-axis.

The post also ties in foundational layout and positioning concepts that make the 3D cube work: Flexbox for centering the cube on the page, `position: relative` on the container to serve as a reference for absolutely positioned faces, and viewport units (`vh`, `vw`) for responsive sizing. The developer emphasizes that CSS 3D comes with built-in GPU acceleration, often outperforming JavaScript-based 3D implementations.

Beyond the cube itself, the tutorial serves as a practical review of core CSS topics — inline vs. block elements, the `inline-block` whitespace gotcha, and the evolution of `display` from simple block/inline to formatting contexts like flex and grid. The message is clear: CSS is far more capable than many developers give it credit for, and mastering its 3D and layout features can eliminate the need for heavier libraries in many cases.

Takeaways

— CSS 3D requires only two core properties: `perspective` (viewing distance) and `transform-style: preserve-3d` (keeps child elements in 3D space).

— Six faces of a cube are positioned by combining `translate` (to move to the correct location) and `rotate` (to face the correct direction).

— A `@keyframes` animation with `rotateY(360deg)` creates a continuous spinning effect when applied with `animation: rotate 5s linear infinite`.

— CSS 3D effects come with built-in GPU acceleration, often outperforming JavaScript-based 3D implementations.

— Flexbox with `justify-content: center` and `align-items: center` provides simple horizontal and vertical centering.

— `inline-block` elements have a whitespace gap issue — line breaks or spaces between elements in HTML are rendered as visible gaps.

— Viewport units (`vh`, `vw`) are relative to the viewport size and are ideal for mobile-responsive layouts.

— `position: relative` on a parent container serves as the positioning anchor for `position: absolute` child elements.

— `flex: 1` on child elements equally distributes remaining space within a flex container.

Conclusions

The fact that a pure CSS 3D cube can impress coworkers who assumed Three.js was needed says more about the industry's blind spot for CSS capabilities than about the technique itself.

CSS 3D's GPU acceleration is a genuine performance advantage — it means developers can add 3D UI elements without the overhead of a JavaScript library or canvas rendering.

The tutorial's structure — building a 3D cube while reviewing Flexbox, positioning, and viewport units — reflects a pedagogical insight: complex effects are the best motivation for learning fundamentals.

The `inline-block` whitespace gotcha is a classic example of how CSS's quirks persist even as the language evolves — it's a detail every frontend developer should know but many discover the hard way.

The post implicitly argues that CSS is undervalued as a tool for 3D and animation, positioning it as a serious alternative to JS libraries for certain use cases.

Concepts & terms

perspective

A CSS property that sets the distance between the viewer and the 3D object, controlling the intensity of the 3D effect. Smaller values create more dramatic perspective distortion.

transform-style: preserve-3d

A CSS property that tells the browser to render child elements in a 3D space rather than flattening them into the parent's 2D plane. Required for any nested 3D transforms to work.

translateZ

A CSS transform function that moves an element along the Z-axis (toward or away from the viewer) in 3D space. Positive values bring it closer, negative values push it farther.

rotateY

A CSS transform function that rotates an element around the vertical Y-axis. Used in the cube to orient faces like the back, left, and right sides.

@keyframes

A CSS rule that defines the stages of an animation by specifying property values at various points (e.g., 0%, 100%). Combined with the `animation` property to create motion.

inline-block

A CSS display value that combines characteristics of inline (elements sit side by side) and block (elements can have width and height). A common pitfall is that whitespace in HTML creates visible gaps between inline-block elements.

viewport units (vh/vw)

CSS units that are relative to the viewport size: 1vh equals 1% of the viewport height, and 1vw equals 1% of the viewport width. Useful for responsive designs that adapt to different screen sizes.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗