3D rotating cube for drawaria.online
This userscript is designed to add a 3D rotating cube to the `drawaria.online` website. Here's a detailed explanation of how it works:
### 1. **Metadata Block**
- The script starts with a metadata block enclosed in `// ==UserScript==` and `// ==/UserScript==`. This block provides information about the script, such as its name, version, description, author, and the website it should run on (`@match`). It also specifies that no special permissions are required (`@grant none`).
### 2. **Creating the Cube Container**
- The script creates a `div` element (`cubeContainer`) to hold the 3D cube. This container is positioned fixed on the screen (20px from the top and right edges) and has a high `z-index` to ensure it appears above other elements. The cursor is set to `move` to indicate that the cube is draggable.
### 3. **Creating the Cube**
- The cube itself is another `div` element (`cube`) with the class `cube`. This element will be transformed in 3D space using CSS.
### 4. **Creating the Cube Faces**
- The cube has six faces: front, back, right, left, top, and bottom. The script creates a `div` for each face, assigns the appropriate class, and appends it to the cube.
### 5. **Adding Elements to the Page**
- The cube is appended to the `cubeContainer`, and the container is then appended to the `body` of the webpage.
### 6. **Adding Styles**
- The script dynamically creates a `
