Преобразуване - CSS-трикове

Anonim

В transformимота ви позволява визуално да се манипулира елемент от изопачаване, завъртане, превод, или мащабиране:

.element ( width: 20px; height: 20px; transform: scale(20); )

Дори с декларирана височина и ширина, този елемент сега ще бъде мащабиран до двадесет пъти по-голям от първоначалния си размер:

Вижте обяснението на Pen Transform от CSS-Tricks (@ css-tricks) на CodePen.

Придаването на тази функция на две стойности ще я разтегне хоризонтално с първата и вертикално с втората. В примера по-долу елементът вече ще бъде два пъти по-широк, но половината от височината на оригиналния елемент:

.element ( transform: scale(2, .5); )

Или можете да бъдете по-конкретни, без да използвате стенографската функция:

transform: scaleX(2); transform: scaleY(.5);

Но това scale()е само една от многото налични функции за преобразуване:

Стойности

  • scale(): Засяга размера на елемента. Това се отнася и до font-size, padding, height, и widthна елемент, също. То също аа стенограмите функция за scaleXи scaleYфункции.
  • skewX()и skewY(): Накланя елемент наляво или надясно, като превръщането на правоъгълник в паралелограм. skew()е стенография, която комбинира skewX()и skewYчрез приемане на двете стойности.
  • translate(): Премества елемент настрани или нагоре и надолу.
  • rotate(): Завърта елемента по посока на часовниковата стрелка от текущото му положение.
  • matrix(): Функция, която вероятно не е предназначена да бъде написана на ръка, но комбинира всички преобразувания в едно.
  • perspective(): Не засяга самия елемент, но засяга трансформациите на 3D трансформациите на низходящи елементи, което им позволява да имат последователна перспектива в дълбочина.

Косо

/* Skew points along the x-axis */ .element ( transform: skewX(25deg); ) /* Skew point along the y-axis */ .element ( transform: skewY(25deg); ) /* Skew points along the x- and y-axis */ .element ( transform: skew(25deg, 25deg); )

Функциите skewXи skewYпреобразуване накланят елемент по един или друг начин. Запомнете: няма стенографско свойство за изкривяване на елемент, така че ще трябва да използвате и двете функции. В примера по-долу можем да изкривим квадрат от 100px x 100px отляво и отдясно с skewX:

Вижте обяснението на Pen Transform от CSS-Tricks (@ css-tricks) на CodePen.

Докато в този пример можем да изкривим елемент вертикално с skewY:

Вижте обяснението на Pen Transform от CSS-Tricks (@ css-tricks) на CodePen.

Сега нека използваме skew()за комбиниране на двете:

Вижте
стенографското свойство Pen skew () от CSS-Tricks (@ css-tricks)
на CodePen.

Завъртете

.element ( transform: rotate(25deg); )

Това завърта елемент по посока на часовниковата стрелка от първоначалното му положение, докато отрицателната стойност би го завъртяла в обратна посока. Ето един прост анимиран пример, при който квадрат продължава да се върти на 360 градуса на всеки три секунди:

Вижте обяснението на Pen Transform от CSS-Tricks (@ css-tricks) на CodePen.

Можем също така да се използват rotateX, rotateYкакто и rotateZфункции, така:

Вижте обяснението на Pen Transform от CSS-Tricks (@ css-tricks) на CodePen.

Превод

.element ( transform: translate(20px, 10px); )

Тази функция за преобразуване премества елемент настрани или нагоре и надолу. Защо просто да не използвате горе / ляво / долно / дясно? Е, понякога е малко объркващо. Бих помислил за тези като оформление / позициониране (те и без това имат по-добра поддръжка на браузъра) и това като начин за преместване на тези неща като част от преход или анимация.

Тези стойности биха били всякакви стойности на дължината, като 10px или 2.4em. Една стойност ще премести елемента вдясно (отрицателни стойности вляво). Ако е предоставена втора стойност, тази втора стойност ще я премести надолу (отрицателни стойности нагоре). Или можете да получите конкретни:

transform: translateX(value); transform: translateY(value);

Важно е да се отбележи, че елементът, който използва, transformняма да причини други елементи да текат около него. Използвайки translateфункцията по-долу и изтласквайки зеления квадрат от първоначалната му позиция, ще забележим как околният текст ще остане фиксиран на мястото си, сякаш квадратът е блоков елемент:

Вижте обяснението на Pen Transform от CSS-Tricks (@ css-tricks) на CodePen.

Също така си струва да се отбележи, че translateще бъде хардуерно ускорено, ако искате да анимирате това свойство, за разлика position: absolute.

Множество стойности

Със списък, разделен с интервал, можете да добавите множество стойности към transformсвойството:

.element ( width: 20px; height: 20px; transform: scale(20) skew(-20deg); )

Струва си да се отбележи, че има ред, в който тези преобразувания ще бъдат извършени, в горния пример първо ще се извърши `изкривяване` и след това елементът ще се мащабира.

Матрица

Функцията за matrixпреобразуване може да се използва за комбиниране на всички преобразувания в едно. Това е малко като стенография за преобразуване, само че не вярвам, че наистина е предназначено да бъде написано на ръка. Има инструменти като The Matrix Resolutions, които могат да преобразуват група трансформации в една декларация на матрица. Може би в някои ситуации това може да намали размера на файла, въпреки че неприятните за автора микро оптимизации като тази вероятно не си струват времето.

За любопитните това:

rotate(45deg) translate(24px, 25px)

може да се представи и като:

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

3D трансформации

Повечето от горните свойства имат триизмерни версии на тях.

translate3d(x, y, z) translateZ(z)

Третата стойност в translate3dили стойността в translateZпремества елемента към зрителя, отрицателните стойности се отдалечават.

scale3d(sx, sy, sz) scaleZ(sz)

Третата стойност в scale3dили стойността в scaleZвлияе върху мащабирането по оста z (напр. Въображаемата линия, излизаща право от екрана).

rotateX(value) rotateY(value) rotate3d(x, y, z)

rotateXи rotateYще завърти елемент в 3D пространство около тези оси. rotate3dви позволява да посочите точка в 3D пространството, в която да завъртите елемента наоколо.

matrix3d(… )

Начин за програмно описание на 3D трансформация в решетка 4 × 4. Никой никога няма да напише някоя от тях, никога.

perspective(value)

Тази стойност не засяга самия елемент, но засяга трансформациите на 3D трансформациите на низходящи елементи, което им позволява да имат последователна перспектива на дълбочината.

Повече информация

  • MDN Документи за преобразуване и използване.
  • Документацията на Дейвид Десандро за 3D трансформации
  • Surfin 'Safari: 3D трансформации
  • Спецификации на W3C за CSS3 трансформации
  • Въведение в CSS 3D трансформации

Поддръжка на браузър

2D трансформации

Chrome Сафари Firefox Опера IE Android iOS
Всякакви 3.1+ 3,5+ 10,5+ 9+ 4.1+ Поне 4

3D трансформации

Chrome Сафари Firefox Опера IE Android iOS
10+ 4+ 12+ нито един 10+ 4.1+ 5+

Префикси на доставчика

.element ( -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value; )