Як обертати і перекладати в CSS одночасно?

Ні, поворот і трансляція – це дві різні трансформації в геометрії. Переміщення передбачає переміщення об’єкта в просторі без його обертання, тоді як обертання передбачає обертання об’єкта навколо фіксованої точки.

Демонстрація CSS: перетворення

  1. перетворення: matrix(1, 2, 3, 4, 5, 6); Копіювати в буфер обміну Виберіть приклад 1.
  2. transform: translate(120px, 50%); Копіювати в буфер обміну Виберіть приклад 2.
  3. перетворення: scale(2, 0.5); …
  4. перетворення: поворот (0,5 оберту); …
  5. перетворення: skew(30deg, 20deg); …
  6. transform: scale(0.5) translate(-100%, -100%);

Правильний спосіб – використовувати функцію перекладу, щоб змінити положення початку перед обертанням.

Щоб застосувати кілька перетворень у CSS, ви можете використовувати кілька значень властивості перетворення CSS, розділених пробілами. Перетворення застосовуються в порядку справа наліво. Це означає, що останнє вказане перетворення застосовується спочатку, а потім перетворення ліворуч від нього, що впливає на кінцевий візуальний результат.

наприклад: Коли колесо рухається на плоскій поверхні, воно демонструє поступальний і обертальний рух одночасно.