Skip to main content
100%

CSS 3D cube

✓ Published0🌍 Public
Aabernier
Last edited Jan 9, 2012
Created on Jan 6, 2012

This example shows a wireframe-style cube rendered in 3D using CSS transforms and perspective. The cube is composed of six square faces, each positioned and rotated with the `rotateY` and `rotateX` functions applied to `translateZ` values, creating a three-dimensional structure. The code relies on CSS variables and the `-webkit-transform-style: preserve-3d` property to maintain depth. It uses only static HTML and CSS, with no JavaScript or external libraries, and the faces are given semi-transparent backgrounds and inset shadows for visual clarity.

AI-generated description

Similar vizzes

Loading thumbnail…

CSS frame portrait

This example renders a wireframe cube as a portrait frame using pure CSS 3D transforms. The six faces of the cube are positioned with `rotateX`, `rotateY`, and `translateZ` properties, while the `frame-portrait` class adds borders to each face to create the frame effect. The page sets a perspective on the `html` element and uses `preserve-3d` on the body and all children, making the cube visible in three-dimensional space. No JavaScript or external libraries are used; the visualization relies entirely on CSS transforms and the static HTML markup.

Aabernier
83% match
Loading thumbnail…

3D CSS Camera

A 3D CSS cube rotates in perspective within a bounded screen, its six labeled faces built from styled divs using CSS 3D transforms. The camera’s field of view, position, and model-view-projection matrix are computed with gl-matrix’s `mat4.perspective`, `mat4.translate`, `mat4.rotate`, and `mat4.multiply` in a CoffeeScript `Camera` class. A DAT.GUI slider adjusts the camera’s `fov` live, while the world itself is rotated via inline `-webkit-transform`.

Aabernier
80% match
Loading thumbnail…

gauge

A single cube, rendered with nested faces, appears to rotate continuously in 3D space while its inner cube repeatedly shrinks and expands. The visualization uses CSS 3D transforms, including `rotateX`, `rotateY`, and `translateZ`, combined with keyframe animations (`@-webkit-keyframes`) to create the motion. The outer container applies a persistent rotation via the `presenter` animation, while the inner cube cycles through scale changes with the `shrink` animation. The code relies on plain HTML divs and CSS, with no JavaScript libraries or external data sources.

Aabernier
74% match
Loading thumbnail…

Rotating Cube

A rotating steel-blue cube appears in a Three.js scene, with its vertical and horizontal rotation controlled by two range sliders. The example builds a basic scene with a `PerspectiveCamera`, `BoxGeometry`, and `MeshBasicMaterial`, then adds an `EdgesGeometry` wireframe to highlight the cube’s edges. It is based on the Three.js “Creating a scene” guide and uses the library’s `WebGLRenderer` for canvas-based rendering, with no external data source.

FFrissAnalytics
73% match
Loading thumbnail…

Rubix Cube

This example renders a classic 3x3x3 Rubik’s Cube in Three.js using WebGL, with all standard color faces (white, yellow, red, orange, green, blue) applied to the outermost cubies. It uses three directional lights and ambient light to illuminate the scene, plus edge outlines to accentuate each cubelet. The user can rotate and zoom via OrbitControls, while an animation loop applies slow continuous rotation to the entire group. The code constructs the cube by positioning 26 small box meshes and assigns per-face materials based on their spatial position.

CCurran Kelleher
73% match
Loading thumbnail…

Basic Three.js App

A single three-dimensional cube rotates continuously in a WebGL-rendered scene. The code builds the scene with Three.js, using a `THREE.PerspectiveCamera` positioned along the z-axis and a `THREE.WebGLRenderer` that fills the window. The cube itself is created from `THREE.BoxGeometry` and shaded with `THREE.MeshNormalMaterial`, which colors each face based on its normal direction. An animation loop, driven by `requestAnimationFrame`, increments the cube’s rotation around both the x and y axes, producing a smooth, perpetual spin.

Aaaizemberg
71% match
Loading thumbnail…

transform 3d

This example builds a 3D cylindrical text display using HTML, CSS, and JavaScript with the Zepto.js library. Each character of a paragraph is wrapped in a `<span>` and given a random `--z` offset, creating a scattered, three-dimensional ring effect. The entire cylinder rotates via a CSS `@keyframes` animation that applies `rotateX` and `rotateY` transforms, while the text itself uses `translateZ` to flow in and out of position. The visual output relies on CSS `perspective` and `transform-style: preserve-3d` to simulate depth.

Uumgi
71% match
Loading thumbnail…

Gist d773d6efc9640e3600ce

This WebGL-based visualization uses Three.js's CSS3DRenderer to position and animate 3D objects in a browser scene, with device orientation controls enabling rotation based on a mobile device's physical movement. The renderer maps 3D transforms onto CSS3D objects, preserving depth and perspective. The scene is rendered using a combination of CSS3D and WebGL techniques, with animated transitions driven by device orientation input.

Aabernier
70% match