Перегляньте 2D перетворення CSS3
The Модуль трансформації є величезним доповненням у CSS3, він займає шлях, яким ми керуємо елементами на веб-сайті на наступний рівень.
Є деякі експерименти, які дійсно вражають мене, такі приклади, як цей. Однак, ми не збираємося будувати щось на зразок іконок тільки для CSS, який може якось перетворитися на автобот, оскільки він може бути приголомшливим і не дуже корисним і в реальному житті..
Натомість, цього разу ми будемо відступати і переглядати основи CSS3 2D Transformations, щоб побачити, як він працює на фундаментальному рівні.
Синтаксис
Модуль CSS3 Transformations в основному дозволяє нам певною мірою трансформувати елемент, наприклад, перекладання, масштабування, обертання і перекосування.
Офіційний синтаксис transform: метод (значення). Однак, як і будь-які інші великі додатки CSS3, які ще перебувають на ранніх стадіях, поточні браузери все ще потребують синтаксичної версії для виконання перетворень. Отже, повний синтаксис вийде так:
transform: метод (значення); / * W3C Офіційний синтаксис * / -o-transform: метод (значення); / * Opera 10.5+ * / -ms-transform: метод (значення); / * Internet Explorer 9.0+ * / -moz-transform: метод (значення); / * Firefox 3.6+ * / -webkit-transform: метод (значення); / * Chrome / Safari 3.2+ * /
Крім того, метод, про який ми говоримо вище, є функції перетворення, які можна замінити одним з наступних: перекласти (), масштаб (), повернути () або косою ().
Значення
Більшість значень методу буде відповідати Вісь Х і Y-вісь. Якщо ви пам'ятаєте декартову систему координат вашого класу Math у середній школі, то основний принцип досить схожий, вісь X являє собою горизонтально лінія і вісь Y представляє вертикальні лінії.
За винятком ротацій. The обертання використовуватиме полярні координати яка виражається в градусах, що знаходяться в діапазоні від 0 до 360.
Значення для всіх методів можуть бути як негативними, так і позитивними. Просто візьміть ноту, оскільки веб-сторінка читається послідовно зверху вниз, що робить вісь Y у веб-роботі протилежною від початкового принципу декартових координат. Це означає, що при додаванні до від'ємного значення Y-вісь, замість цього він перейде на вершину.
Використання перетворень
Тепер давайте побачимо наступну основну демонстрацію, щоб побачити Трансформацію в дії.
Я перекладаю
Не затьмарюйте цей термін перекласти, не буде перекладати іноземну мову. The перекласти тут насправді є спосіб переміщення елементів в певному напрямку.
Метод містить два значення; X і Y. X значення як ми вказали вище, елемент буде прийнятий горизонтально; ліворуч або праворуч, в той час як Y значення візьме його вертикально знизу або вгорі.
Тепер давайте побачимо кілька простих демонстрацій нижче:
div ширина: 100px; висота: 100px; transform: translate (100px, 250px);
Вищезгаданий фрагмент перемістить елемент на 100px праворуч і 250px на дно.
div ширина: 100px; висота: 100px; transform: translate (100px, 0);
Вищезгаданий фрагмент перемістить елемент праворуч на 100px, оскільки ми обнуляємо вісь Y. Потім, якщо ми хочемо перемістити елемент ліворуч, нам потрібно лише встановити вісь Х у від'ємне, а саме:
div ширина: 100px; висота: 100px; transform: translate (-100px, 0);
- Демо-версія "Перекласти"
Альтернативно, ми можемо переміщати елемент в одному напрямку за допомогою цих індивідуальних методів; translateX () і translateY (), різниця кожного з цих методів приймає тільки одне значення.
Отже, практично кажучи, transform: translate (-100px, 0) також дорівнює transform: translateX (-100px).
II - Шкала
The масштабу Метод дозволяє збільшити або зменшити елементи з його фактичного розміру. Значення масштабу є таким же, як перекласти Метод вище, він також містить X і Y. Єдина відмінність полягає в тому, що ми не вказуємо одиницю. Ось приклад:
div ширина: 100px; висота: 100px; трансформація: шкала (1.5);
Наведений вище приклад збільшить div 1.5 або 150% його фактичного розміру, і оскільки ми масштабуємо його рівномірно для обох напрямків X і Y, нам потрібно лише оголосити його в одному значенні. Ви також можете оголосити його таким чином трансформація: шкала (1,5,1,5); якщо ви хочете піти більш докладно, воно просто зробить те ж саме.
Крім того, якщо ми хочемо зменшити елемент, то конкретно будемо використовувати значення від 0,999 до абсолютного 0, як приклад нижче, який зменшить розмір div на 50% або половину:
div ширина: 100px; висота: 100px; трансформація: шкала (0,5);
Але будьте обережні, якщо ви встановите значення абсолютним “0” div просто зникне, тому, якщо у вас є вагома причина для цього, я не рекомендую робити це.
- Демо "Масштаб"
III - Поворот
Як ми вже згадували раніше на цій посаді, повернути Метод використовує полярні координати, тому значення вказується в градусах. Ось два приклади
Фрагмент нижче буде обертатися div 30 градусів за годинниковою стрілкою.
div ширина: 100px; висота: 100px; transform: rotate (30deg);
Негативне значення, як проілюстровано в прикладі нижче, поверне div в протилежному напрямку (проти годинникової стрілки) в тій же мірі.
div ширина: 100px; висота: 100px; transform: rotate (-30deg);
- Демонстрація "Поворот"
IV - Нахил
The косо Метод дозволяє створити свого роду паралелограм. Він також містить два значення осі X і Y. Однак сама величина вказана в градусах, замість лінійних вимірювань, як ми використовуємо для масштабу або перекласти метод. Ось приклад:
div ширина: 200px; висота: 100px; transform: косою (30deg, 10deg);
- Демонстрація "Skew"
V - множинний метод
The перетворення властивість не обмежується обробкою тільки одного методу, насправді ми можемо включати в одне оголошення кілька методів, наприклад:
div ширина: 100px; висота: 100px; transform: translateX (100px) обертається (45deg);
Вищезгаданий фрагмент перемістить елемент 100px вправо і в той же час він також обертається на 45 градусів.
Демонстрація "Кілька методів".
Transform Origin
The транс-походження - як випливає з назви - використовується для управління відправною точкою перетворення. Якщо ми прямо не оголошуємо це властивість з наступним синтаксисом transform-origin: X Y;, тоді браузер буде приймати значення за замовчуванням, яке становить 50% для X і 50% для Y.
Тепер, якщо вказати перетворення-походження до 0 (X) 0 (Y) перетворення почнеться у верхньому лівому куті.
Знову ж таки, всім браузерам все ще потрібна префіксна версія, щоб назвати цю властивість. Отже, ось повна версія, щоб переконатися, що вона працює в більшості поточних веб-переглядачів:
-webkit-transform-origin: X Y; -moz-transform-origin: X Y; -o-transform-origin: X Y; -ms-transform-origin: X Y; transform-origin: X Y;
- Демо "Трансформація походження"
Висновок
Ми пройшли всі чотири основні методи трансформації; перекладати, масштабувати, повертати і перекошувати
Однак, як уже згадувалося, цей модуль все ще перебуває на початковій стадії, тому, якщо ви застосуєте ці методи на наступному веб-сайті, переконайтеся, що він граціозно знижується для несумісних веб-переглядачів (тут я не маю на увазі IE6).
Нарешті, ви можете переглянути всі демо або завантажити джерело з наступних посилань.
- Демо
- Завантажити джерело
