А теперь попробуем сделать трансформацию плавной. Для этого в CSS предусмотрено свойство transition. Не будем пока вдаваться в подробности, как именно работает и применяется transition — это будет подробно рассмотрено в ближайшем тренажёре.

Если в двух словах, transition позволяет изменить значение какого-либо свойства плавно. В нашем случае плавно будет меняться свойство transform с функцией scale, а переход между двумя значениями будет длиться полсекунды.

Всё это наглядно покажет, как при разных значениях transform-origin меняется точка начала системы координат. Для демонстрации этого давайте задавать значения transform-origin и нажимать кнопку «Запустить», по которой для блока .picture переключается класс active.