<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo-3D Pixel Sphere with Rotation and Swapping</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #010501; /* Dark background color */
            margin: 0;
            overflow: hidden; /* Prevent overflow from rotation */
        }

        #pixelGrid {
            display: grid;
            grid-template-columns: repeat(15, 1fr); /* 15 equal columns */
            grid-template-rows: repeat(15, 1fr);    /* 15 equal rows */
            gap: 0; /* No gap between grid items */
            height: 90vmin; /* Use viewport height for responsiveness */
            width: 90vmin; /* Use viewport width for responsiveness */
            position: relative; /* For absolute positioning */
            transition: transform 0.5s ease-in-out; /* Smooth rotation */
        }

        .grid-item {
            display: flex; /* Enable flexbox on grid items */
            justify-content: center; /* Center pixel contents horizontally */
            align-items: center; /* Center pixel contents vertically */
            position: relative; /* For positioning the pixel elements */
            box-sizing: border-box; /* Include border in size calculations */
        }

        .pixel {
            display: flex; /* Enable flexbox on pixel elements */
            justify-content: center; /* Center the pixel */
            align-items: center; /* Center the pixel */
            border-radius: 50%; /* Make the pixels circular */
            position: absolute; /* Allow absolute positioning */
            transition: transform 0.3s ease-in-out; /* Smooth transition for scaling */
        }
    </style>
</head>
<body>
    <div id="pixelGrid"></div>

    <script>
        const gridSize = 15;   // Grid size (15x15)
        const center = Math.floor(gridSize / 2); // Center index
        const maxRadius = Math.floor(gridSize / 2); // Maximum distance from center
        let pixels = []; // Store pixels for manipulation

        const generateSphere = () => {
            const grid = document.getElementById('pixelGrid');
            grid.innerHTML = ''; // Clear existing elements
            pixels = []; // Reset pixels array

            for (let row = 0; row < gridSize; row++) {
                for (let col = 0; col < gridSize; col++) {
                    const div = document.createElement('div');
                    div.className = 'grid-item'; // Assign grid item class

                    // Calculate distance from the center to create spherical effect
                    const dx = col - center;
                    const dy = row - center;
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    
                    if (distance < maxRadius) {
                        const pixelSize = getPixelSize(distance); // Get size based on distance
                        const pixel = document.createElement('div');
                        pixel.className = 'pixel'; // Set class for pixel styling
                        pixel.style.width = `${pixelSize}px`; // Set the pixel width dynamically
                        pixel.style.height = `${pixelSize}px`; // Set the pixel height dynamically
                        pixel.style.backgroundColor = getPixelColor(distance); // Set color based on distance

                        // Center the pixel within the grid item
                        div.style.width = `${pixelSize}px`;
                        div.style.height = `${pixelSize}px`;
                        pixel.style.left = `${(gridSize - 1) * (pixelSize / 2 - 0.5)}px`; // Center the pixel
                        pixel.style.top = `${(gridSize - 1) * (pixelSize / 2 - 0.5)}px`;
                        
                        div.appendChild(pixel); // Append the pixel to the grid item
                        pixels.push(pixel); // Store pixels for animation
                    }
                    grid.appendChild(div); // Append the grid item to the grid
                }
            }
        };

        const getPixelSize = (distance) => {
            const maxSize = Math.min(window.innerWidth, window.innerHeight) / gridSize * 0.5; // Max size based on viewport and grid size
            const minSize = 5;  // Minimum size for the furthest pixels
            const size = maxSize - (distance / maxRadius) * maxSize; // Size decreases with distance
            return Math.max(size, minSize); // Ensure it does not go below minSize
        };

        const getPixelColor = (distance) => {
            const shade = Math.floor((distance / maxRadius) * 255); // Color shade based on distance
            return `rgb(${255 - shade}, ${255 - shade}, ${255})`; // Lighter colors closer to the center
        };

        const animatePixels = () => {
            pixels.forEach(pixel => {
                const randomTime = Math.floor(Math.random() * 4000) + 1000; // Random time between 1 and 5 seconds
                setTimeout(() => {
                    const randomScale = 1 + (Math.random() * 1.5); // Random scale between 1 and 2.5
                    pixel.style.transform = `scale(${randomScale})`;
                }, randomTime);
            });
        };

        const rotateGrid = () => {
            const grid = document.getElementById('pixelGrid');
            const randomRotation = Math.floor(Math.random() * 360); // Random rotation degree
            grid.style.transform = `rotate(${randomRotation}deg)`; // Rotate the grid
        };

        const swapPixels = () => {
            const grid = document.getElementById('pixelGrid');
            const pixelDivs = grid.children;

            const index1 = Math.floor(Math.random() * pixelDivs.length);
            const index2 = Math.floor(Math.random() * pixelDivs.length);

            // Swap pixel positions
            const temp = pixelDivs[index1].innerHTML;
            pixelDivs[index1].innerHTML = pixelDivs[index2].innerHTML;
            pixelDivs[index2].innerHTML = temp;
        };

        // Generate the pseudo-3D sphere
        generateSphere();
        setInterval(() => {
            animatePixels();
            rotateGrid();
            swapPixels();
        }, 5000); // Animate every 5 seconds

        window.addEventListener('resize', generateSphere); // Regenerate when the window is resized
    </script>
</body>
</html>


STOP SIMPLIFYING STRICTLY!!! DO NOT SIMPLIFY ANYTHING! remove all comments! 

advance in this code indices exchange transition animation.


one index shifted towards other = other shifted towards that in position visibly transitioning and emptying that cell in grid while in transition.


interconnect transitionings through indices to all other overall randomness in concept.

strictly let all cells grid indices fluctuate in repositionings transitioning through all other in randomnesses!

utilise some genetic algorithm dna recalibration sequences in concepts and animations transformations.
fuk! it is alive! continue creating a demihuman animation.

now go and 3d rotate it all somehow randomly. css rotate sux.

no, do not utilise css rotate. use javascript fullyfledged 3d spheres in a matrix as need in this grid.

and why nothing rotating but some jiggles up on the top only in bunch of rows?

it looks as viewport zoom factor highly affecting overall inGrid behaviour. go fix it.

you are like doing wtf per iteration per wtf exactly? do full3d spheromatrix.
you need do full3dspheres and full 3drotate in javascript, not css garbages.