frontend queen

ваши два примера ясности не внесли, совсем разные
могу предположить, что нужна такая штука

такое делать на css избыточно
представьте только, какое количество перерисовок понадобится, cpu вам спасибо не скажет
лучший вариант - работа с gpu (проще в тему зайти через библиотеку threejs, сам glsl порой может обить всё желание)
отрисовка и анимация куба, хоба:

//создаем сцену
const scene = new THREE.Scene();
//создаем камеру на основе ширины и высоты окна
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight);
//создаем рендерер, определяем его размеры
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth,window.innerHeight);
//отрисовываем в нужном месте
$('body').append(renderer.domElement);

//создаем меш (состоит из геометрии и материала)
const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial({color: 0xff0000});
const cube = new THREE.Mesh(geometry,material);

//добавляем его на сцену
scene.add(cube);
//позиционируем
cube.position.z = -5;
cube.rotation.x = 10;
cube.rotation.y = 5;
//рендерим
renderer.render(scene,camera);

//добавляем анимацию
let animate = function(){
  //задаем вращение
  cube.rotation.x += 0.01;
  renderer.render(scene,camera);
  //просим у браузера обновлять анимацию перед каждой перерисовкой
  requestAnimationFrame(animate);
}
animate();

пожалуйста, примеров куча

если говорить о математике, то нужна линейная алгебра и чуток тригонометрии
речи о докторской степени не идет, но понимание базовых принципов только сыграют на руку

вариантов куча. например, на кнопки с цветами навешивать data-color, а потом уже его отлавливать и менять состояние "коврика"
этот хорош еще и потому, что у вас наверняка будет форма, а данные о нужной расцветке нужно как-то передавать

подойдет?

let x = 1;

function createSum(x){
  return x + 5;
}

function foo(){
  let x = 5;
  return createSum(x);
}

function bar(){
  let x = 50;
  return createSum(x);
}

console.log(foo());
console.log(bar());

https://w3bits.com/javascript-slidetoggle/#slideUp

1. отлавливать скролл и инициализировать слайдер после того, как блок с ним будет виден пользователю

if (window.innerHeight + document.documentElement.scrollTop === 
document.documentElement.offsetHeight) {
    sliderInit();
}

2. оптимизировать и !кропать картинки, поскольку они даже в блоках с фиксированными и меньшими шириной и высотой будут загружать своё полное разрешение
3. intersection observer
4. поглядеть советы в аналогичном треде