Картинка - строчный элемент(inline). Ведет себя как "слово" в тексте. По умолчанию у текста стоит vertical-align: baseline, которое оставляет небольшой отступ снизу для витков букв типа и крючков у букв типа "р, у, щ, ц, ф" и тд.
Допиши для картинки vertical-align: top. Это уберет этот отступ.

в скрипте, вращение вокруг оси X считается относительно высоты ВСЕГО документа. Добавляя блоки сверху вы увеличиваете высоту документа. Попробуйте считать относительно viewport-а (окна браузера)

В моей практике, пытаясь получить какие-либо значения из DOM - я всегда получал string )
parseFloat/parseInt в помощь.

Можешь проверить:

$(".select").change(function () {
          var str = 0;
          $(".active option:selected").each(function () {
                str += parseFloat($(this).val());
                console.log(typeof $(this).val());
              });
          $(".cena").text(str);
        })
        .change();