Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/withaarzoo/3d-rotate-tube
This is a simple HTML and CSS code snippet that creates a 3D rotating tube with animated text on its faces. The tube is displayed in a webpage and the text on each face of the tubr changes dynamically, creating a visually engaging effect.
https://github.com/withaarzoo/3d-rotate-tube
3d-tube css html html-css-project
Last synced: about 10 hours ago
JSON representation
This is a simple HTML and CSS code snippet that creates a 3D rotating tube with animated text on its faces. The tube is displayed in a webpage and the text on each face of the tubr changes dynamically, creating a visually engaging effect.
- Host: GitHub
- URL: https://github.com/withaarzoo/3d-rotate-tube
- Owner: withaarzoo
- Created: 2023-08-30T13:03:07.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-30T13:05:14.000Z (about 1 year ago)
- Last Synced: 2023-12-30T18:51:49.772Z (11 months ago)
- Topics: 3d-tube, css, html, html-css-project
- Language: HTML
- Homepage:
- Size: 3.91 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 3D Rotate Tube with Animated Text
This is a simple HTML and CSS code snippet that creates a 3D rotating tube with animated text on its faces. The tube is displayed in a webpage and the text on each face of the tubr changes dynamically, creating a visually engaging effect.
## How it Works
The code uses HTML and CSS to create the 3D rotating cube effect:
### HTML Structure
The HTML structure is relatively simple:
- The `` declaration specifies the document type and language.
- The `` section includes metadata and references to external resources, such as fonts and a CSS file (`style.css`).
- The `` section contains a `
` element with the class `container`. Inside this container, there is another `` with the class `box`, which represents the 3D cube. Within the `box`, there are multiple `` elements, each containing text to be displayed on the cube's faces.
### CSS Styling
The CSS in the `style.css` file is responsible for the 3D rotating cube effect and the animated text:
- Various font families are imported from Google Fonts to be used in the text.
- Global reset rules ensure consistent styling across different browsers.
- The `body` element is styled to create a full-page display and center the cube.
- The `.container` class styles are used to center the `.box` element within the container.
- The `.box` class is where the 3D cube effect is applied. It uses the `transform-style` property to enable 3D transformations and applies an animation called `animate` to achieve the rotation effect.
- The `.box span` class styles each face of the cube. The `background` property adds a gradient background, and the `transform` property rotates each face along the X-axis.
- The `.box span i` styles the `` elements (italic text) within the spans, allowing for additional text formatting.
- The `@keyframes animate` rule defines the animation sequence that rotates the cube along the X-axis and Y-axis, giving the illusion of a rotating cube.
## Usage
1. Copy the HTML code and save it in an HTML file.
2. Copy the CSS code and save it in a file named `style.css` in the same directory as the HTML file.
3. Open the HTML file in a web browser to see the 3D rotating cube with animated text.
Feel free to customize the text, fonts, colors, and animation properties to create your own unique 3D cube effect!
## Credits
This code was inspired by a design created by Aarzoo on CodePen.
## License
This code is released under the [MIT License](LICENSE).
## Preview
