Css transform два параметра

How to Apply Multiple Transforms in CSS

There are many ways of applying multiple transforms in CSS. In this snippet, we’ll demonstrate how to achieve this using multiple values of the transform property, as well as using nested classes.

In the example below, we’ll use multiple values of the transform property. It is possible to add multiple values applied one after another. The values must be separated by space. The transform property applies the rightmost value, and then the values on the left. In other words, the last value of the list will be applied first. That’s why changing the value order will affect the final result.

Let’s see how to apply it step by step.

Create HTML

h1> W3Docs h1> strong> How to apply multiple transforms in CSS? strong> div class="box"> div>

Add CSS

• Use a loaded image for the background property and specify the width, height, and border properties.
• Add the transform property with two of its values: rotate and translate.

body < margin: 10px; > .box < background: url("https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60") no-repeat; background-size: cover; height: 90px; width: 300px; border: 2px solid #000000; transform: rotate(90deg) translate(150px, -230px); > h1 < color: #000000; >

Example of applying multiple transform values:

html> html> head> title>Title of the document title> style> body < margin: 10px; > .box < background: url("https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60") no-repeat; background-size: cover; height: 90px; width: 300px; border: 2px solid #000000; transform: rotate(110deg) translate(150px, -230px); > h1 < color: #000000; > style> head> body> h1> W3Docs h1> strong> How to apply multiple transforms in CSS? strong> div class="box"> div> body> html>

Result

In the example mentioned above, we applied the transform property on the loaded image. The «rotate» value rotated the image, and the «translate» shifted the image.

Let’s see how we can have the same effect using nested classes. In this case, we need to nest one element with a specified transform with another element having another transform. To apply multiple transforms, this can be repeated with multiple nesting of elements. First would be applied the parent of the nested element. Then, subsequently, each of the children element’s transforms would be applied next.

Example of applying multiple transforms using nested classes:

html> html> head> title>Title of the document title> style> h1 < color: #000000; > .outer-transform < transform: translate(150px, 180px); > .inner-transform < background: url("https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60") no-repeat; background-size: cover; height: 100px; width: 400px; border: 2px solid #000000; transform: rotate(-150deg); > style> head> body> h1> W3Docs h1> strong> How to apply multiple transforms in CSS? strong> div class="outer-transform"> div class="inner-transform"> div> div> body> html>

Here, we applied the rotate() transformation for the inner element and the translate() transformation for the outer element.

How to apply the same transformation again?

It is possible to apply the same transformation to an element again after it has been transformed. You can achieve this using CSS transitions or animations.

Here’s an example of how you can use CSS transitions to rotate an element back and forth between 180deg and 90deg when the user hovers over it:

html> html> head> title>Title of the document title> style> .box < margin: 50px auto; transform: rotate(180deg); transition: transform 0.5s ease; background: url("https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60") no-repeat; background-size: cover; height: 200px; width: 200px; border: 2px solid #000000; transform: rotate(-150deg); > .box:hover < transform: rotate(90deg); > style> head> body> div class="box"> div> body> html>

In this example, the .box div element is initially rotated 180deg using the transform property. We’ve also added a CSS transition property to specify that any changes to the transform property should be animated over a duration of 0.5 seconds with an ease-in-out timing function.

When the user hovers over the .box element, the transform property is changed to rotate the element 90deg. Since we’ve defined a transition for the transform property, the rotation is animated smoothly over the specified duration.

You can modify this example to achieve different rotation angles and animation timings as per your requirement.

Источник

transform

CSS-свойство transform позволяет вам поворачивать, масштабировать, наклонять или сдвигать элемент. Оно модифицирует координатное пространство для CSS визуальной форматируемой модели.

Интерактивный пример

Если свойство имеет значение, отличное от none , будет создан контекст наложения. В этом случае, элемент будет действовать как содержащий блок для любых элементов position: fixed; или position: absolute; которые он содержит.

Предупреждение: Только трансформируемый элемент может быть transform . Т.е. все элементы, шаблоны которых регулируются блочной моделью CSS, кроме : неизменяемые инлайновые блоки, блоки таблица-колонка, и блоки таблица-колонка-группа (en-US) .

Синтаксис

/* Значения ключевым словом*/ transform: none; /* Значения функций */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translateX(2em); transform: translateY(3in); transform: translateZ(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scaleX(2); transform: scaleY(0.5); transform: scaleZ(0.3); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); /* Мультифункциональные значения */ transform: translateX(10px) rotate(10deg) translateY(5px); transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg); /* Глобальные значения */ transform: inherit; transform: initial; transform: unset; 

Свойство transform может быть указано как значение ключевого слова none или как одно или более значений .

Значения

Одна или более применяемых функций CSS-трансформации. Функции трансформации умножаются в порядке слева направо, что означает, что составное трансформирование эффективнее применять в порядке справа налево.

Указывает, что трансформация не должна применяться.

Формальный синтаксис

Если perspective() (en-US) является одним из мультифункциональных значений, оно должно быть указано первым.

Источник

Сочетание CSS-свойств: transform, translate, rotate, scale и offset

CSS-свойство transform становится ещё мощнее, благодаря новым отдельным свойствам преобразований ( translate , rotate , scale ) и свойству для смещения – offset (как часть CSS Motion Path). Все они эффективно обеспечивают преобразование html-элемента и должны следовать определенным правилам, чтобы точно определять, как эти преобразования будут применяться.

Эти новые свойства доступны в Firefox 72+. Отдельные свойства Motion path есть в браузерах Chromium, а некоторые свойства преобразования скрываются за флажком Experimental Web Platform Features.

Сила свойства transform в поддержке любого количества преобразований. Оно может содержать несколько перемещений, поворотов, масштабов, перекосов и изменений перспективы. Если объединять их в разном порядке, то можно получать различные эффекты.

Как эти свойства взаимодействуют с transform и transform-origin ?

Основы преобразований

Когда выполняется преобразования, то сам элемент технически остается неизменным. Трансформации влияют только на его систему координат. Таким образом, вращение поворачивает его по осям x и y. Для преобразования, которое поворачивает элемент на 45 градусов, а затем применяет перевод на 100 пикселей вправо, реальное движение не будет горизонтальным вправо. Вправо элемент начнёт перемещение от уже измененной при повороте системы координат: вниз и вправо под углом 45 градусов.

Какие возможности предоставляют отдельные свойства преобразования?

Чтобы не перечислять все свойства внутри функции transform , можно указать одно перемещение, одно вращение и одно масштабирование по-отдельности. Заодно это позволит при необходимости изменить только какое-то одно преобразование, не меняя остальные.

На первый взгляд можно было бы ожидать, что элемент будет повернут на 10 градусов ( rotate ), а затем при наведении курсора добавит к исходному преобразованию масштабирование ( scale ). Однако, свойство transform будет переопределено, поэтому вращение потеряется при наведении курсора. По мере того, как усложняются различные состояния или взаимодействия, может быть тяжело поддерживать все желаемые варианты преобразований.

С отдельными свойствами преобразования можно добавлять или удалять отдельные трансформации, не влияя на остальные. Таким образом, можно немного изменить код и получить желаемый результат, в котором элемент при наведении одновременно поворачивается и масштабируется.

Теперь можно применить transition или анимацию по отдельности. В этом примере масштабирование и перемещение изменяются при наведении курсора с разной продолжительностью и задержкой. Поворот не выполняется в transition и не влияет на анимации двух других свойств.

Есть ли ограничения?

Отдельные свойства не работают с несколькими вариантами опций, как в исходном свойстве transition . Если нужно реализовать что-то большее, придётся вернуться к transition .

Все они также имеют один и тот же transform-origin , поэтому независимо от того, используете ли свойство transform или три свойства по отдельности, все они зависят от transform-origin .

Эти свойства всегда применяются в одном и том же порядке, и они появляются перед всем остальным в свойстве transform :

Если нужно, чтобы rotate применялось перед translate , придётся использовать свойство transform . Подойдёт любой из следующих вариантов.

aside < transform: rotate(30deg) translate(10px,10px); >/* Они по-прежнему разделены, поэтому могут работать независимо */ aside.alternate

Свойство offset

С помощью свойства transform элемент можно перемещать, вращать, масштабировать и наклонять. Также эффективно перемещать и вращать элемент можно с помощью свойства offset .

Несмотря на то, что это работает по-другому, все свойства offset применяют преобразования в той же системе координат. Таким образом, они полагаются на тот же transform-origin , который используют остальные четыре отдельных свойства преобразований.

Когда применяются свойства offset ?

Три новых независимых свойства преобразования применяются до свойств offset . Функции transform применяются после offset .

1. translate
2. rotate
3. scale
4. offset (distance, anchor, rotate …)
5. transform (здесь можете устанавливать свой порядок)

Так, например, использование базовой анимации offset-path вернёт различный визуальный результат, если объединить ее с transform: translate (25px -35px) или translate: 25px -35px .

Довольно интересно (и часто сбивает с толку) то, как все они взаимодействуют друг с другом. Однако знание последовательности преобразований – это уже половина решения в прояснении магии, происходящей с transform , отдельными свойствами преобразования и траекторией движения.

Поддержка отдельных свойств преобразований в вашем браузере

translate
rotate
scale
offset-anchor
offset-distance
offset-path
offset-position
offset-rotate

Источник