Description
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Â
<!DOCTYPE html>
 declaration specifies the document type and language. - TheÂ
<head>
 section includes metadata and references to external resources, such as fonts and a CSS file (style.css
). - TheÂ
<body>
 section contains aÂ<div>
 element with the classÂcontainer
. Inside this container, there is anotherÂ<div>
 with the classÂbox
, which represents the 3D cube. Within theÂbox
, there are multipleÂ<span>
 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Â<i>
 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
- Copy the HTML code and save it in an HTML file.
- Copy the CSS code and save it in a file namedÂ
style.css
 in the same directory as the HTML file. - 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.
Reviews
There are no reviews yet.