HTML Explanation
01
Inside the <head> section, metadata like character encoding (UTF-8) and viewport settings for responsive design are defined.
02
The <title> element specifies the page title as "Multiple Rotating Cubes," and a link to the CSS file (style.css) is included for styling.
03
The <body> contains a div with the class grid-mask, which acts as a container for the cubes, ensuring they are displayed in a flexible, center-aligned, and perspective-enabled grid.
04
The main element within this div houses several div elements with the class cube, each representing a 3D cube.
05
Every cube consists of six div elements with the class panel (front, back, left, right, top, bottom), which hold img elements for different images displayed on each face of the cube.
CSS Explanation
01
The CSS controls the layout, appearance, and animation of the 3D cubes.
02
CSS custom properties (variables) like --unit, --half, --neg-half, and --duration define sizes and animation duration, promoting consistency and easy adjustments.
03
Global styles for the HTML and body ensure no margin or padding, and the body has a radial gradient background, which is overlaid by a semi-transparent image for a visual effect.
04
The grid-mask class enables a perspective view, allowing for 3D rendering, and centers the content vertically and horizontally.
05
The main element is styled as a grid, distributing the cubes evenly with specified column and row sizes, and adds a 3D transform with rotation and perspective origin adjustments.
06
Animations defined by @keyframes control the cube and grid movements.
07
The cube class applies 3D transformations to each cube, ensuring the correct alignment and animation of its faces.
08
Each panel represents a face of the cube, with absolute positioning and 3D transformations to place the panels correctly around the cube.
09
The img elements inside panels scale to cover the entire panel, maintaining aspect ratio.
Javascript Explanation
01
No Javascript code needed
HTML
CSS
JS
CSS