← Back to the summary

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

Written at the beginning: Today's lesson was so interesting! The teacher led us to create a 3D rotating cube using pure CSS, and also reviewed knowledge points like Flex layout, inline-block, and positioning. I originally thought 3D effects required Canvas or Three.js, but CSS said, "Let me handle it!" — and it comes with GPU acceleration, performing much better than I imagined.

1. CSS 3D: No JS Needed for 3D Effects

1.1 The Core of CSS 3D: perspective + transform-style

The teacher said:

"CSS properties trigger 3D rendering, not just 3D but also GPU acceleration. Even for 2D interfaces, we sometimes manually add 3D effects."

Two core properties for CSS 3D:

Property	Role	Analogy
`perspective`	Sets the viewing distance, determines the strength of the 3D effect	The farther you are from the object, the more obvious the perspective
`transform-style: preserve-3d`	Keeps child elements in 3D space	Tells the browser: "The elements inside are 3D, don't flatten them"

.box-wrap {
    width: 200px;
    height: 200px;
    perspective: 600px;  /* Core of 3D: viewing distance */
}

.box {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;  /* Maintain 3D space */
    animation: rotate 5s linear infinite;
}

perspective: 600px is like standing 600 pixels away from an object. The smaller the viewing distance, the more exaggerated the 3D effect; the larger the distance, the flatter the effect.

1.2 HTML Structure of the Cube

<div class="box-wrap">
    <div class="box">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
        <div class="face left">Left</div>
        <div class="face right">Right</div>
        <div class="face top">Top</div>
        <div class="face bottom">Bottom</div>
    </div>
</div>

The structure is clear:

Outer box-wrap: Responsible for setting the viewing distance (perspective).
Middle box: Responsible for maintaining 3D space (transform-style: preserve-3d) and rotation animation.
Inner 6 faces: The six faces of the cube, each positioned correctly using transform.

It's like building blocks: first build a frame (box-wrap), then place a rotatable box inside the frame (box), and finally attach different colors to the six faces of the box.

1.3 3D Positioning of the Six Faces: A Combination of translate + rotate

.face {
    width: 200px;
    height: 200px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    opacity: 0.7;
}

.front  { background-color: #4299e1; transform: translateZ(100px); }
.back   { background-color: #f5656f; transform: translateZ(-100px) rotateY(180deg); }
.left   { background-color: #48bb78; transform: translateX(-100px) rotateY(-90deg); }
.right  { background-color: #48bb78; transform: translateX(100px) rotateY(90deg); }
.top    { background-color: #ecc94b; transform: translateY(-100px) rotateX(90deg); }
.bottom { background-color: #ecc94b; transform: translateY(100px) rotateX(-90deg); }

Positioning logic for each face:

Face	Move	Rotate	Effect
Front	`translateZ(100px)`	None	Push forward 100px
Back	`translateZ(-100px)`	`rotateY(180deg)`	Push backward, then rotate 180 degrees (face outward)
Left	`translateX(-100px)`	`rotateY(-90deg)`	Push left, rotate counterclockwise 90 degrees
Right	`translateX(100px)`	`rotateY(90deg)`	Push right, rotate clockwise 90 degrees
Top	`translateY(-100px)`	`rotateX(90deg)`	Push up, rotate 90 degrees around X-axis
Bottom	`translateY(100px)`	`rotateX(-90deg)`	Push down, rotate -90 degrees around X-axis

Core idea: first translate to the correct position, then rotate to the correct orientation.

It's like folding a paper box: first cut the paper into six squares (face), then fold them to the front, back, left, right, top, and bottom directions, and finally glue them together.

1.4 Rotation Animation: @keyframes Makes the Cube Spin

@keyframes rotate {
    100% {
        transform: rotateY(360deg);
    }
}

.box {
    animation: rotate 5s linear infinite;
}

rotate: Animation name.
5s: One animation lasts 5 seconds.
linear: Constant speed rotation.
infinite: Infinite loop.
rotateY(360deg): Rotate 360 degrees around the Y-axis.

animation is CSS's "action director" — you tell it how to move, how long to move, and how many times to move, and it executes automatically.

2. Flex Layout: The "Universal Glue" of Modern Frontend

2.1 Why Use Flex?

The teacher said:

"Flexible layout, the most commonly used layout for mobile with varying viewport sizes."

Traditional layout relies on float and position, with complex code and poor compatibility. With Flex layout, a single line of display: flex can solve most alignment problems.

2.2 Horizontal and Vertical Centering: Flex's "Signature Dish"

html, body {
    height: 100vh;  /* 100% of viewport height */
    display: flex;
    flex-direction: row;  /* Main axis direction: horizontal */
    justify-content: center;  /* Main axis alignment: center */
    align-items: center;      /* Cross axis alignment: center */
}

Three lines of code to achieve horizontal and vertical centering! Previously, this required position: absolute + top: 50% + transform: translate(-50%, -50%).

Property	Role	Direction
`justify-content`	Main axis alignment	Horizontal (default) or vertical
`align-items`	Cross axis alignment	Vertical (default) or horizontal

When flex-direction: row, the main axis is horizontal, and the cross axis is vertical. If changed to column, the main and cross axes swap.

It's like queuing:

row: Everyone lines up horizontally (like a cafeteria queue).
column: Everyone lines up vertically (like people standing in an elevator).

2.3 flex: 1: Equal Distribution of Space Among Child Elements

<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

.box {
    display: flex;
}
.item {
    flex: 1;  /* Each child element equally divides the remaining space */
    background-color: #f00;
    text-align: center;
}

flex: 1 means "I want one share of the remaining space." If all four child elements have flex: 1, the space is divided into four equal parts.

It's like dividing a cake: four people each say "I want one share," so the cake is cut into four equal pieces, one for each person.

3. Inline vs Block: CSS's "Personality Classification"

3.1 Two "Personalities" of HTML Elements

The teacher said:

"HTML elements have two types: inline and block."

Type	Representative Elements	Characteristics
Block	`div`, `ul`, `p`, `h1`	Occupies its own line, can set width and height
Inline	`span`, `a`, `strong`	Does not occupy its own line, cannot set width and height

<div class="box">1</div>
<div class="box">2</div>

Two divs will be arranged vertically because div is a block-level element, occupying its own line.

3.2 inline-block: The "Hybrid" of Inline and Block

.box {
    background-color: #f00;
    display: inline-block;  /* Inline-block */
    width: 50%;
}

inline-block is a "hybrid" of inline and block:

Does not push siblings down (sits side by side like inline elements).
Can set width and height (like block elements).

But the teacher warned: inline-block has a hidden pitfall — whitespace characters take up space!

<div class="box">1</div>
<div class="box">2</div>

If there is a line break or space between two inline-block divs, the browser treats it as a character, occupying a certain width. As a result, two 50% width divs cannot fit on one line!

Solutions:

Remove line breaks and spaces in the HTML.
Or set font-size: 0 on the parent element and restore font-size on child elements.

It's like two people standing side by side: the space is just enough, but suddenly an "invisible person" (the space) appears in the middle, and they can't fit.

3.3 The Evolution of display

The teacher summarized the evolution of display:

Browser default block/inline
    ↓
display manually switches inline / block
    ↓
Formatting context (flex / inline-block / grid)

display is not just for switching between inline and block; it can also enable more powerful layout modes.

4. Viewport Units: "Weapons" for Responsive Layout

4.1 vh and vw: Sizes Relative to the Viewport

html, body {
    height: 100vh;
}

Unit	Meaning	Calculation
`vh`	Viewport height	1vh = 1% of viewport height
`vw`	Viewport width	1vw = 1% of viewport width

100vh is 100% of the viewport height, filling the entire viewport regardless of screen size.

The teacher said:

"100 parts (proportional). Mobile adaptation. Viewport-height, viewport-width."

vh and vw are new units in CSS3, especially suitable for mobile adaptation. Since mobile phone screen sizes vary greatly, using fixed px values can cause issues, while vh/vw automatically adapts.

It's like drawing with percentages instead of fixed sizes — when the canvas is larger, the drawing is larger; when the canvas is smaller, the drawing is smaller.

5. Positioning: relative vs absolute

5.1 Relative Positioning: Relative to Its Original Position

position: relative;

Offset relative to the element's original position, but the element still occupies its original space.

5.2 Absolute Positioning: Relative to the Nearest Positioned Ancestor

position: absolute;

Positioned relative to the nearest ancestor with a position value other than static. If no such ancestor exists, it is positioned relative to <html>.

In our 3D cube:

.box {
    position: relative;  /* Serves as the positioning reference for faces */
}

.face {
    position: absolute;  /* Positioned relative to .box */
}

box is set to relative, and face is set to absolute — this allows the six faces to be precisely positioned relative to the box.

It's like putting up posters in a room:

relative: You stand in the center of the room and tell the poster, "Move 10cm to the left."
absolute: You directly stick the poster on the wall, with its position relative to the wall.

6. Summary: CSS is More Powerful Than You Think

Knowledge Point	Description
`perspective`	3D viewing distance, determines the strength of the 3D effect
`transform-style: preserve-3d`	Maintains the 3D spatial relationship of child elements
`translateX/Y/Z`	3D translation
`rotateX/Y`	3D rotation
`@keyframes` + `animation`	CSS animation
`display: flex`	Flexible layout
`justify-content` / `align-items`	Main axis/cross axis alignment
`flex: 1`	Equal distribution of remaining space
`inline-block`	Inline-block, can set width and height but sits side by side
`vh/vw`	Responsive units relative to the viewport
`position: relative/absolute`	Relative/absolute positioning

CSS is not just a tool for "beautifying pages"; it can create 3D effects, animations, and complex layouts. Moreover, CSS 3D comes with GPU acceleration, often performing better than JS implementations.

Final Thoughts

Today's lesson was really interesting! I personally created a rotating 3D cube using pure CSS, and also understood knowledge points like Flex layout, inline-block, and viewport units. It turns out CSS is so powerful. Previously, I only used it to adjust colors and spacing, which was a waste of its potential.

Next time an interviewer asks you: "How do you create 3D effects with CSS?"

You can calmly say:

"CSS 3D mainly uses two properties: perspective to set the viewing distance, and transform-style: preserve-3d to maintain 3D space. Then use translateX/Y/Z to position elements in 3D space, and rotateX/Y to rotate elements. Combined with @keyframes and animation, you can achieve rotation animations. CSS 3D comes with GPU acceleration, so performance is good."

Then, watching the interviewer's surprised expression, silently think: This time, I've got it.

All code examples in this article are from classroom learning materials and are real and runnable.