About

Creating 3D objects in a 2D browser environment relies on the transform-style: preserve-3d property and rigorous understanding of the Cartesian coordinate system. This tool automates the calculation of translation matrices.

To form a perfect cube, each of the 6 faces is rotated along the x or y axis and then translated outward by exactly half the cube's width (w÷2). This translation, often called the apothem in geometry, prevents the faces from intersecting at the center.

The visual perspective is controlled by the perspective property. A lower value (e.g., 400px) creates a dramatic, fisheye distortion, while a higher value (e.g., 2000px) approximates an orthographic projection.

Formulas

The transform logic for any given face i:

T_i = rotate(θ) ⋅ translateZ(size2)

Where the perspective projection P is applied to the parent container:

P = 10000100001-1/d0001

d = perspective depth value (px)

Reference Data

Face	Rotation Axis	Rotation Angle	Translation (Z)
Front	None	0°	+size/2
Back	Y-Axis	180°	+size/2
Right	Y-Axis	90°	+size/2
Left	Y-Axis	-90°	+size/2
Top	X-Axis	90°	+size/2
Bottom	X-Axis	-90°	+size/2

Frequently Asked Questions

This usually happens if the parent container lacks the `perspective` property or if `transform-style: preserve-3d` is missing. This tool includes both in the generated code.

Yes. The generated code uses background-color, but you can replace that property with `background-image: url(...)` in the CSS for each specific face class (e.g., `.face-front`).

The generated cube uses pixel units by default. To make it responsive, change the size unit from `px` to `vmin` or `%` in the generated CSS variables.

Yes, CSS 3D transforms are supported in all modern browsers (Chrome, Firefox, Safari, Edge). IE11 has partial support but is generally considered obsolete.