Проблема с перемещением блоков в Javascript ⇐ CSS

[Anonymous]

Мне нужно сделать движущиеся блоки для моего проекта, я решил сделать тестовый сайт, где написать пример кода, который в будущем перенесу в проект.
Код:

Код: Выделить всё

.block {
display: inline-block;
text-align: center;
font-weight: bold;
cursor: pointer;
}




Swap Properties


const blocks = Array.from(document.querySelectorAll('.block'));
const swapButton = document.getElementById('swapButton');

const blockProperties = [
{ id: 'block1', width: '100px', height: '100px', backgroundColor: 'red', color: 'white', content: 'Block 1' },
{ id: 'block2', width: '120px', height: '80px', backgroundColor: 'blue', color: 'white', content: 'Block 2' },
{ id: 'block3', width: '150px', height: '60px', backgroundColor: 'green', color: 'black', content: 'Block 3' },
{ id: 'block4', width: '180px', height: '90px', backgroundColor: 'yellow', color: 'black', content: 'Block 4' },
{ id: 'block5', width: '200px', height: '120px', backgroundColor: 'purple', color: 'white', content: 'Block 5' },
{ id: 'block6', width: '160px', height: '80px', backgroundColor: 'orange', color: 'black', content: 'Block 6' },
{ id: 'block7', width: '140px', height: '100px', backgroundColor: 'pink', color: 'black', content: 'Block 7' },
{ id: 'block8', width: '120px', height: '120px', backgroundColor: 'brown', color: 'white', content: 'Block 8' },
{ id: 'block9', width: '100px', height: '140px', backgroundColor: 'gray', color: 'white', content: 'Block 9' },
{ id: 'block10', width: '80px', height: '160px', backgroundColor: 'teal', color: 'white', content: 'Block 10' },
{ id: 'block11', width: '60px', height: '180px', backgroundColor: 'navy', color: 'white', content: 'Block 11' },
{ id: 'block12', width: '90px', height: '90px', backgroundColor: 'olive', color: 'white', content: 'Block 12' }
];

swapButton.addEventListener('click', swapProperties);

function applyProperties(block, properties) {
block.id = properties.id;
block.style.width = properties.width;
block.style.height = properties.height;
block.style.backgroundColor = properties.backgroundColor;
block.style.color = properties.color;
block.textContent = properties.content;
}

function swapProperties() {
const tempProps = blockProperties.pop();
blockProperties.unshift(tempProps);

blocks.forEach((block, index) => {
applyProperties(block, blockProperties[index]);
});
}

blocks.forEach((block, index) => {
applyProperties(block, blockProperties[index]);
});

когда я вхожу в

Код: Выделить всё

transform: translate property(100%, 100%);

один из блоков
все полностью ломается, блоки либо исчезают, либо перекрывают друг друга, (ввожу разные значения для каждого блока x y)
Я спросил у GhatGPT за помощью, но как я и думала она мне дала совершенно нерабочий ход и там все стало только хуже. Что еще нужно добавить или где и что переписать, чтобы программа учитывала это свойство???

Подробнее здесь: https://stackoverflow.com/questions/784 ... javascript