Skip to main content
SimilarExport ZIP
100%

transform 3

✓ Published0🌍 Public
Uumgi
Last edited Mar 25, 2021
Created on Mar 25, 2021
Forked from transform 2

This example uses HTML, CSS, and JavaScript to create an animated 3D cylinder of text. Randomly placed paragraphs with placeholder Latin and Japanese characters are wrapped in infinitely spinning cylindrical layers, with a slowly tilting camera. The code applies per-character transforms using CSS custom properties, and the Zepto.js library is used to manipulate the DOM and set styles. The project uses React as noted in the metadata.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
92% match
Loading thumbnail…

transform 2

Cylinders of text rotate in 3D space around a central camera, with each character positioned on the cylinder's surface based on its horizontal offset. The camera oscillates between two rotational extremes, creating a dynamic, shifting view of the layered text columns. The implementation uses Zepto for DOM manipulation and CSS custom properties for per-character transforms, with randomized animation delays, durations, and vertical positions for each cylinder.

Uumgi
86% match
Loading thumbnail…

three.js webgl - simple text from json

This example renders the text "Three.js\nStroke text." as 3D geometry in a WebGL scene using Three.js. A `FontLoader` loads a typeface JSON file containing glyph outlines, from which `generateShapes` creates filled shapes with semi-transparent material and stroked outlines with darker material. The scene includes an `OrbitControls` camera for interactive rotation and a light gray background. The rendering highlights both the filled and stroked paths of each character.

LLaurens
70% match
Loading thumbnail…

three.js

Three colored cubes rotate continuously in a gray 3D scene, each spinning on its X and Y axes at staggered speeds. The visualization uses Three.js with a WebGL renderer to draw the cubes, a PerspectiveCamera, DirectionalLight, and MeshPhongMaterial for shading. The animation loop increments rotation based on time, driven by requestAnimationFrame, with cubes positioned at different X coordinates.

Ssabrinamochi
70% match
Loading thumbnail…

React + ThreeJS 3D Cube of Spheres

This example displays a three-dimensional cube of spheres, arranged in a 4x4x4 grid, with each sphere’s color determined by its position via an HSL calculation. The entire structure rotates automatically, while users can drag to orbit the view and scroll to zoom, thanks to Three.js’s `OrbitControls`. The scene is built with React 19, which manages the mount point and lifecycle, while Three.js handles WebGL rendering, including `MeshPhongMaterial` for coloring and `DirectionalLight` for illumination.

CCurran Kelleher
66% match
Loading thumbnail…

3d_animation

This example presents a static HTML page that displays a heading and logs a message to the browser console. The page uses basic CSS to style the heading and JavaScript for the console output, demonstrating the foundational structure of a web page. It relies on standard HTML, CSS, and the browser’s built-in JavaScript console, rather than any external libraries or data sources. The code is a minimal starting point for web development, referencing a React starter as a potential next step.

MMarina Shemesh
66% match
Loading thumbnail…

Untitled

A grid of colored 3D cubes displays varying heights, with each cube's height labeled numerically on its top face. Users can click an "update" button to refresh the data, which generates new random height values for each cube. The visualization supports interactive rotation by dragging the mouse, allowing the entire cube arrangement to be viewed from different angles. The code uses the d3-3d library to project cube vertices, computing visible faces and sorting them for proper depth rendering, while handling mouse drag events to update the rotation angles and re-render the SVG paths and text labels accordingly.

Aanushaanumula
66% match
Loading thumbnail…

Untitled

A grid of 3D cubes with varying heights is rendered using the d3-3d library, with each cube colored and labeled by its height value. Users can drag to rotate the entire scene, which updates the cube positions, faces, and text labels in real time. The visualization uses d3._3d() for 3D projection, d3.drag() for interaction, and SVG transitions for smooth animations, with data generated procedurally via d3.randomUniform.

MManohar Kowthavarapu
66% match