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.
The code uses HTML and CSS to create the 3D rotating cube effect:
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 classcontainer. Inside this container, there is another<div>with the classbox, which represents the 3D cube. Within thebox, there are multiple<span>elements, each containing text to be displayed on the cube's faces.
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
bodyelement is styled to create a full-page display and center the cube. - The
.containerclass styles are used to center the.boxelement within the container. - The
.boxclass is where the 3D cube effect is applied. It uses thetransform-styleproperty to enable 3D transformations and applies an animation calledanimateto achieve the rotation effect. - The
.box spanclass styles each face of the cube. Thebackgroundproperty adds a gradient background, and thetransformproperty rotates each face along the X-axis. - The
.box span istyles the<i>elements (italic text) within the spans, allowing for additional text formatting. - The
@keyframes animaterule defines the animation sequence that rotates the cube along the X-axis and Y-axis, giving the illusion of a rotating cube.
- Copy the HTML code and save it in an HTML file.
- Copy the CSS code and save it in a file named
style.cssin 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!
This code was inspired by a design created by Aarzoo on CodePen.
This code is released under the MIT License.
