Дмитрий Кравченко

советую использовать миксы. таким образом:

<div class="advantages__wrap clearfix">

  <div class="advantages__item advantage">
    <div class="advantage__image-wrap">
      <img class="advantage__image" src="img/advantages/1.png" alt="image">
    </div>
    <div class="advantage__content">
      <h3 class="advantage__head">Опыт работы</h3>
      <p class="advantage__text">Более 8 лет мы занимаемся архитектурной подсветкой зданий</p>
    </div>
  </div>
</div>

phantomjs + casperjs

чтоб браузер понял html разметку и показал ее пользователю, разумеется.
php код выполняется на сервере и генерирует как раз html разметку, понятную браузеру.

нужно ли генерить html файл для пользователя

нужно.

сами кнопки любыми отдельными элементами - баттонами, ссылками, дивами
почему не псевдоэлементами? - ведь их нужно будет нажимать

стрелки внутри могут быть псевдоэлементами с нужными трансформами, инлайн свг, либо просто картинками

svg, d3

if(element.offsetTop <= document.body.scrollTop){/*code here*/}

p{
  pointer-events: none;
}

var $h3 = $("<h3 class='communicationH3'><i class='fa fa-times' aria-hidden='true'></i> communication</h3>");
$h3.on('click',function(){
  /*code here*/
});
$(".diveid").append($h3);

сперва скомпилируйте sass, затем добавьте префиксы

это невозможно

его невозможно подключить или отключить, оно или поддерживается, или нет
тут видим, что эксплореры меньше 10-го 3D css трансформации не поддерживают. А отзеркаливание текста при повороте - это backface-visibility, которое можно выставить в hidden

можно сделать одним блоком с padding + background-position, тогда не нужно будет ничего ровнять