andreyWayne

JS:

foo.onclick = function(){
	this.classList.toggle('rotate')
}

CSS:

img {
  transition: transform 1s ease;
}
.rotate {
  transform: rotate(180deg);
}

https://jsfiddle.net/t0coxu4s/

plnkr.co/edit/okpZyH71WjKeXqJLhrLD?p=preview

Тебе может подойти:

.article {
position: relative
}

.article:after {
position: absolute;
background-image: url(...) center no-repeat;
}

https://jsfiddle.net/ned4ded/1ordzcww/

Картинка с девушкой - отдельная png?

Кладёшь её в блок с формой, через position: absolute сдвигаешь влево

1- Возможен ли 100% пиксель пёрфект? как бы я не старался сдвигать всё по милипиксилям, всё равно идёт малейшее несоответствие с макетом, а особенно со шрифтами.

Шрифты - подогнать можно, если дизайнер их предварительно правильно обработал. Но, подогнать под 1 конкретный браузер, т.к. разные браузеры по разному рендерят шрифты. Выводы - сделаете самостоятельно :)

2- Нужно ли так очень ответственно подходить к работе?

Эти вопросы обычно обсуждаю с заказчиком и/или дизайнером или тем, кто принимает макет по факту. А так же опираясь на то, из какого места у дизайнера рисовавшего макет - растут руки, иной раз, делать "в точности как нарисовано" - означат "угробить проект", т.к. мама не хотела, папа не старался он дизайнер, он так видит.

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

Очень странно, что они начали жаловаться после того как приняли макет...

В браузере и фотошопе разные движки рендеринга шрифтов, всего-то. Потому и результаты разные.