Square Animation

A 3D rotating cube animation built with HTML, CSS, and JavaScript.

Description

This project displays a 3D cube with numbered faces that continuously rotates in both X and Y axes. The cube is composed of six sides, each with a different number of dots (1-6) similar to a die. The animation runs infinitely with a smooth rotation effect.

Features

• 3D cube with six distinct faces
• Continuous rotation animation (15 seconds per full rotation)
• Responsive design that centers the cube on the screen
• Each face of the cube has a different number of dots (1-6)
• Purple/blue violet color scheme with black cube faces

Project Structure

.
├── index.html
├── css/
│   └── style.css
├── js/
│   └── index.js
└── .vscode/
    └── settings.json

Technologies Used

• HTML5
• CSS3 (with 3D transforms and animations)
• JavaScript (currently contains example code snippets)

How It Works

The cube is created using CSS 3D transforms:

1. The main cube container uses transform-style: preserve-3d to create a 3D space
2. Each face is positioned absolutely and transformed to create the cube shape
3. A CSS animation rotates the cube continuously around both X and Y axes
4. Perspective is applied to the container to give a 3D effect

Developer

Developed by Isah Abdullahi Isah

Setup

1. Clone or download the repository
2. Open index.html in a web browser
3. (Optional) Use Live Server extension with port 5501 as configured in .vscode/settings.json

Note

The JavaScript file currently contains commented-out example code snippets and is not actively used in the animation. The cube animation is implemented purely with CSS.

Customization

You can modify the following aspects by editing the CSS:

• Rotation speed (change the animation duration in .cube)
• Cube size (adjust width/height in .cube and transform values)
• Colors (edit background-color in body and .side)
• Dot patterns (modify the divs in each face)