Поворот изображения изменит угол, на котором отображается это изображение. Для простой графики это может добавить некоторое разнообразие и интерес к тому, что может быть простым или скучным изображением. Как и при всех преобразованиях, rotate работает как часть анимации или для статической графики. Изучение того, как использовать поворот в SVG или масштабируемую векторную графику, позволяет запросить четкий угол дизайна вашей фигуры. Функция поворота SVG работает, чтобы повернуть изображение в любом направлении.
О повороте
Функция поворота касается угла графика. Когда вы создаете SVG-образ, вы создадите статическую модель, которая, вероятно, будет сидеть под традиционным углом. Например, квадрат будет иметь две стороны вдоль оси X и два вдоль оси Y. С вращением вы можете взять тот же квадрат и превратить его в алмазное образование.
С помощью всего лишь одного эффекта вы перешли от очень типичной коробки (которая является супер распространенной на веб-сайтах) к алмазу, что не является обычным явлением и которое не добавило в дизайн какого-либо интересного визуального разнообразия. Поворот также является частью возможностей анимации в SVG. Круг может постоянно поворачиваться во время отображения. Это движение может привлечь внимание посетителей и помочь вам сосредоточить свой опыт на ключевых областях или элементах в дизайне.
Поворот работает над теорией о том, что одна точка на изображении останется фиксированной. Представьте себе бумагу, прикрепленную к картону с помощью толкателя. Место контакта - фиксированное место. Если вы поворачиваете бумагу, захватывая край и поворачивая его по часовой стрелке или против часовой стрелки, то контактный штырь никогда не перемещается, но прямоугольник все еще меняет углы. Бумага будет вращаться, но неподвижная точка штифта остается неизменной. Это очень похоже на работу функции rotate.
Повернуть синтаксис
При повороте вы указываете угол поворота и координаты фиксированной области.
преобразование = «поворот (45100100)»
Угол поворота - это первое, что вы добавляете. В этом коде угол поворота составляет 45 градусов. Центральная точка - это то, что вы добавили бы дальше. Здесь эта центральная точка находится в координатах 100, 100. Если вы не укажете координаты центрального положения, они будут по умолчанию равны 0,0. В приведенном ниже примере угол будет составлять 45 градусов, но поскольку центральная точка не установлена, по умолчанию будет 0,0. преобразование = "поворот (45)"
По умолчанию угол идет в сторону правой части графика. Чтобы повернуть фигуру в противоположном направлении, вы используете знак минус, чтобы отобразить отрицательное значение. преобразование = "поворот (-45)"
Вращение на 45 градусов составляет четверть оборота, так как углы основаны на круге на 360 градусов. Если вы перечислите оборот как 360, изображение не изменится, потому что вы буквально переверните его в полный круг, поэтому конечный результат будет идентичным по внешнему виду тому, с чего вы начали.
