transform 2

100%

✓ Published1🌍 Public

Last edited Mar 28, 2021

Created on Mar 25, 2021

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.

AI-generated description

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

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

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

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

63% match

Loading thumbnail…

rotate text

Four labeled data points display in red text across an SVG canvas, each with a small circle marking its bounding-box center. After a two-second delay, the text labels rotate 90 degrees around those center points over two seconds. The example uses d3.v4 with a linear scale for x-axis positioning, `getBBox()` to compute label dimensions, and the `transition()` API to animate the rotation. Data is a hardcoded array of objects with `id`, `total`, and `text` properties.

PPatrick Wojda

63% match

Loading thumbnail…

transform, scale example

This example demonstrates how SVG transform chaining applies scale and rotation to a text element relative to a fixed coordinate system. The code renders a single text label ("that's the way") positioned at the center of a canvas, with a green crosshair polyline marking the reference point. Using D3 v4, the script selects the body, appends an SVG container, and applies a transform attribute combining translate, scale, and rotate operations. The visual result shows the text enlarged and tilted around its anchor, while the polyline highlights the origin. The example relies on D3's selection and attribute methods, with SVG elements styled via CSS classes.

335degrees

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

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

62% match

Loading thumbnail…

transform, scale example

This example demonstrates how D3’s `transform` attribute applies scaling and rotation to SVG text. The text "that's the way" is positioned at (200,200), scaled by a factor of 3, and rotated 20 degrees, all within an SVG canvas. Two reference polylines cross at the text’s origin to highlight the transformation’s effect. The code uses D3 v4 to append the SVG, set attributes like `transform`, and style elements via CSS classes. Hover interactions on `.dot` elements are defined but unused here. The rendering is purely SVG, with no external data source.

335degrees

62% match