svetlov97

transform: rotate(-90deg);

А вы не пробовали использовать DevTools? F12 очень полезная вещь. Посмотрите как работает.

Очень просто если ты используешь тег .
У тебя каждая нечетная строка и каждый нечетный столбик имеют background:rgba(0, 0, 0, 0.2) и на местах их пересечения 0.2 и 0.2 прозрачности накладываютя друг на друга и получается 0.4

Вот, делай так:

tr:nth-child(odd){
    background: rgba(0, 0, 0, 0.2);
}
tr th:nth-child(odd){
    background: rgba(0, 0, 0, 0.2);
}

Просто напиши функцию js и все. Кстате говоря, если jquery то даже легче.

Попробуй через кейфрейм

Ну ты смешной, ты в тегах еще б видеокамера указал. Используй peerJS (гайды - примеры на сайте) и копай в сторону peer to peer. WebRTC - это технология передачи аудио/видео с оборудования пользователя в поток.

Он у тебя в absolute, играй свойствами top и left

<meta name="viewport" content="width=1000px, initial-scale=1">

У него нету, внимательнее

то на мобильных устройствах моя вёрстка изменяется по масштабу, и становится мелкой-нечитаемой.

Если я пишу *{ 
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
}

* (звездочка) применяет стили ко всем элементам

Есть такая проблема, советую прочитать статью на хабре "Дрессируем box-shadow"

Можно увидеть код который ты используешь, пожалуйста.
Советую тебе прочитать замечательную статью на MDN про SVG вот ссылка.