Раніше ми бачили, що CSS дозволяє нам застосовувати кольору, встановлювати шрифти, змінювати налаштування тексту, позиціонувати елементи, задавати для них простір, прикрашати їх і переміщати.
Перетворення в CSS є набором функцій. які дозволяють певним чином надавати елементу форму:
- translate. переміщує елемент уздовж трьох осей (х, у і z);
- rotate. обертає елемент навколо центральної точки;
- scale. змінює розмір елемента;
- skew. спотворює елемент.
властивості трансформації
Є три доступних властивості для трансформації:
- transform визначає, яка функція буде застосовуватися (translate. rotate. scale і ін.);
- transform-origin дозволяє змінювати точку початку перетворення (працює як background-position);
- transform-style для налаштування 3D.
Зверніть увагу, що на відміну від background і border. властивість transform не є скороченим.
Тут ми будемо використовувати тільки transform.
Чи не перериває потік
Щоб запобігти несподіване поведінку, трансформовані елементи не впливають на потік. Незалежно від обертання, масштабування або переміщення, вони не будуть впливати на інші елементи.
Функція translate () надає користувачам можливість елемент в площині (по осях х та у). Вона приймає або:
- один параметр: переміщує елемент уздовж осі х;
- два параметра: перше значення для осі х, друге для осі у.
Це схоже на використання відносного позиціонування за допомогою значень left і top.
Давайте переробимо нашу замкнуту анімацію за допомогою translate. замість позиціонування left / top:
Пам'ятайте: transform - це стильова властивість. translate () - це значення (і одночасно функція), що застосовується до цієї властивості.
Ви можете використовувати translateX () і translateY (). щоб перемістити елемент уздовж тільки осі х і у, відповідно.
rotate () приймає тільки один параметр, який є значенням кута і визначається в градусах (deg), градах (grad), радіанах (rad) або в оборотах (turn) (один оборот еквівалентний повному колу).
Функція scale () дозволяє змінювати розмір елемента. Вона може збільшити або зменшити елемент. Функція приймає або:
- один параметр: зміна розмірів елемента однаково по висоті і ширині;
- два параметра: перше значення змінює розмір елемента по горизонталі, друге по вертикалі.
Діапазон можливих значень:
- 1: елемент зберігає свій первісний розмір;
- 2: елемент подвоюється в розмірі;
- 0.5: елемент зменшується наполовину;
- 0: елемент в основному зникає (так як його висота і ширина дорівнюють нулю);
- -1: елемент відбивається.
Як і для translate (). у функція scale () є версії для х і у: scaleX () і scaleY (). для зміни розміру по горизонталі і вертикалі, відповідно.
Функція skew () дозволяє спотворювати елемент. зрушуючи його боку вздовж ліній.
Ця функція перетворення використовується рідко, оскільки її наслідки дуже непередбачувані, а результат не обов'язково привабливий. Проте, давайте подивимося, як це працює.
Як і scale (). функція skew () приймає або:
- один параметр: елемент спотворюється по горизонталі;
- два параметра: перше значення спотворює елемент по горизонталі, друге по вертикалі.
Як і rotate (). функція skew () приймає тільки значення кута, такого як градуси (deg).
3D-функції
Ми бачили, як функції трансформації працюють на площині. вздовж осей х і у.
- У translate () до двох параметрів:
- translate (x)
- translate (x, y)
- translateX () тільки для осі х
- translateY () тільки для осі у
Але для всіх цих функцій також є 3D-версії.
Наприклад, для translate () є версія translate3d (). яка може конвертувати в трьох вимірах. а це значить, що вона також включає в себе вісь z (крім того існує окрема функція translateZ).
Параметр z в основному змушує елемент рухатися ближче і далі, в залежності від зменшення або збільшення значення. Це як збільшення і зменшення масштабу.
Зелений блок піднімається на 200px «вгору» по осі z, як ніби стаючи ближче до нас.
До батьківського елементу потрібно застосувати perspective: 500px. щоб тривимірний простір стало помітним. В якості альтернативи також може бути використано transform: perspective (500px).