Graphics 3D on the Web
3D on the web ranges from simple CSS transforms that fake depth to full WebGL scenes with real cameras, lighting, and meshes — and picking the right layer of the stack depends on how much depth you actually need.
How Much 3D Do You Actually Need?
3D on the web covers a wide spectrum. At the simple end, CSS can tilt and flip flat elements to fake depth with almost no cost. At the complex end, WebGL-powered engines render real meshes, cameras, and lights the way a game engine would. Most projects should start at the simplest layer that gets the job done and only reach for a full 3D engine when the content genuinely needs it.
CSS 3D Transforms: Depth Without a 3D Engine
CSS can position elements in a simulated 3D space using perspective (how dramatic the depth looks), transform-style: preserve-3d (letting children keep their own 3D positioning), and functions like rotateX, rotateY, and translateZ. This is enough to build convincing flip cards, tilting panels, or layered parallax effects — all with ordinary HTML elements and no rendering engine at all.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.card {
perspective: 800px;
}
.card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="card">
<div class="card-inner"></div>
</div>
</body>
</html>WebGL and 3D Engines: Real Scenes
Once you need actual 3D objects — a rotating product model, a navigable environment, realistic lighting and materials — CSS transforms aren't enough, because they only fake depth on flat elements rather than rendering true geometry. That's where WebGL comes in, almost always through a library like three.js or Babylon.js, which provides the vocabulary a 3D scene actually needs.
- Geometry/mesh — the shape of an object, built from vertices and faces.
- Material — how a mesh's surface reacts to light (color, shininess, texture).
- Light — one or more sources that illuminate the scene (directional, point, ambient).
- Camera — the viewpoint the scene is rendered from.
- Renderer — the piece that turns the scene, camera, and lights into pixels each frame.
glTF: Delivering 3D Models Efficiently
Just as JPEG and PNG standardized how 2D images are packaged for the web, glTF has become the standard format for delivering 3D models — bundling meshes, materials, textures, and even animations into a compact file that three.js, Babylon.js, and the built-in model-viewer component can all load directly.
Exercise: Graphics and 3D
What does WebGL primarily rely on to render 3D graphics in the browser?
