Skip to main content
SimilarExport ZIP
100%

transform 3d

✓ Published1🌍 Public
Uumgi
Last edited Mar 25, 2021
Created on Mar 25, 2021
Forked from HTML Starter

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.

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 3

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.

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
85% 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
71% 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
67% match
Loading thumbnail…

Hello vZome

This example shows a rotating three-dimensional box rendered in a browser using React and react-three-fiber’s Canvas component. The scene contains a single mesh with box buffer geometry and normal material, animated via useFrame to update rotation on each frame. React binds the htm template literal syntax, while ReactDOM renders the canvas into the page’s root element. The code also references a vZome file, though its model is not yet integrated into the visualization.

SScott Vorthmann
67% 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…

SVG with CSS Animation

This example demonstrates the interplay between HTML and CSS for rendering and animating text in a web browser. It presents a static HTML page with a large, centered message that uses CSS styling for visual formatting. The core functionality relies on the HTML `<div>` element for content structure and the CSS `font-size` and `text-align` properties for layout and appearance. Although the example references a React starter, this specific implementation uses plain HTML and CSS without JavaScript or additional animation libraries, showcasing a bare-minimum approach to web-based visualization.

Ddaigou65
66% match
Loading thumbnail…

SVG with CSS Animation

This example demonstrates the interplay between HTML and CSS for rendering and animating text in a web browser. It presents a static HTML page with a large, centered message that uses CSS styling for visual formatting. The core functionality relies on the HTML `<div>` element for content structure and the CSS `font-size` and `text-align` properties for layout and appearance. Although the example references a React starter, this specific implementation uses plain HTML and CSS without JavaScript or additional animation libraries, showcasing a bare-minimum approach to web-based visualization.

Ddaigou65
66% match