Inertia

100%

✓ Published0🌍 Public

Last edited Feb 2, 2014

Created on Aug 9, 2012

A 3D cube rendered with CSS transforms sits at the center of a scrollable background grid. Dragging the background applies inertial motion, with velocity and friction computed per frame using a custom Loop animation and Hammer.js for touch gestures. jQuery UI handles pointer interactions, while mousewheel events adjust the cube’s rotation. The cube’s six faces use CSS `rotateX` and `rotateY` transforms with `translateZ` offsets, and the background’s scroll position is updated with `translateZ` for depth. The code relies on raw GitHub-sourced libraries and jQuery for event handling.

AI-generated description

Similar vizzes

Loading thumbnail…

Inertia and back

The example shows a field of 100 translucent orange and pink circles of varying sizes, which drift in response to dragging and then ease back to their original positions after a few seconds. The offset follows the formula `t * (1-t) * velocity`, creating a smooth return animation. Using D3’s `drag` and the `d3-inertia` helper, the code tracks pointer movement through callbacks like `start`, `move`, and `end`, while a custom `render` function applies the positional offset to each circle. The SVG rendering uses D3 selections to update `cx` and `cy` attributes based on stored angles and velocities.

PPhilippe Rivière

71% match

Loading thumbnail…

CSS 3D cube

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.

Aabernier

67% 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

65% match

Loading thumbnail…

momentum

On mouse press, the page displays a real-time, animated scatterplot of mouse velocity, computed as the distance between successive mouse positions divided by the elapsed time between frames. The animation runs continuously while the button is held, logging each velocity sample to the browser console. The visualization uses a custom `Loop` class built on `requestAnimFrame` (Paul Irish’s shim), with mouse coordinates tracked via jQuery’s `mousemove` event. A blue grid background, drawn with CSS gradients, provides visual reference.

Aabernier

65% match

Loading thumbnail…

Isometric III

An animated field of white, wireframe cubes rotates and rises in an isometric grid. Each cube spins on its vertical axis, with the rotation amount and vertical position varying by its distance from the center, creating a wave-like motion across the diamond-shaped pattern. Built with D3’s `d3-timer` and `d3-ease` modules, it uses a custom `isometric` library to project 3D coordinates onto a 2D Canvas context, drawing paths with `moveTo` and `lineTo`. The animation is driven by the timer’s elapsed time, and cube placement uses both Manhattan and Cartesian distance calculations.

Mmbostock

65% 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

64% match

Loading thumbnail…

ThreeJS Starter

A Three.js scene displays a single blue cube rotating automatically in 3D space. The cube uses a `MeshPhongMaterial` that responds to both ambient and directional lighting, showcasing interactive orbit controls for drag-to-rotate and scroll-to-zoom. The animation runs via `requestAnimationFrame` with WebGL rendering on a canvas element. The code imports Three.js and its `OrbitControls` addon through import maps, with a responsive resize handler updating camera aspect and renderer size.

CCurran Kelleher

64% match

Loading thumbnail…

Isometric

A grid of white cubes is rendered on a canvas, each rotating around its vertical axis. The rotation angle for each cube is determined by the sine of the elapsed time plus a value derived from its grid position, creating a subtle, wave-like variation across the display. The animation is driven by d3-timer, while a custom isometric projection library handles the 3D-to-2D transformation by projecting vertices onto the canvas using a fixed camera angle.

Mmbostock

63% match