Трансформисати - ЦСС-трикови

Anonim

transformИмовина вам омогућава да визуелно манипулацију елемент по кривљење медијума, ротирајући, превођење, или скалирање:

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

Чак и са декларисаном висином и ширином, овај елемент ће сада бити увећан на двадесет пута већу од своје првобитне величине:

Погледајте објашњење Трансформације оловке од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

Давањем ове функције две вредности развући ће је водоравно за прву, а вертикално за другу. У примеру испод елемент ће сада имати двоструку ширину, али половину висине оригиналног елемента:

.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(): Не утиче на сам елемент, али утиче на трансформације 3Д трансформација потомствених елемената, омогућавајући им свима да имају конзистентну дубинску перспективу.

Скев

/* 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трансформација функције тенд елемента један или други начин. Запамтите: не постоји стенографско својство за искривљавање елемента, па ћете морати да користите обе функције. У доњем примеру можемо да искривимо квадрат од 100 к 100 пиксела лево и десно помоћу skewX:

Погледајте објашњење Трансформације оловке од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

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

Погледајте објашњење Трансформације оловке од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

Хајде сада skew()да комбинирамо ово двоје:

Погледајте
скраћеницу Пен скев () од ЦСС-Трицкс (@ цсс-трицкс)
на ЦодеПен-у.

Ротирај

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

Ово ротира елемент у смеру казаљке на сату од првобитног положаја, док би га негативна вредност ротирала у супротном смеру. Ево једноставног анимираног примера где квадрат наставља да се окреће за 360 степени сваке три секунде:

Погледајте објашњење Трансформације оловке од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

Такође можемо да користимо функције и rotateX, rotateYи rotateZто тако:

Погледајте објашњење Трансформације оловке од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

превести

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

Ова функција трансформације помера елемент бочно, или горе-доле. Зашто једноставно не користити горњи / леви / доњи / десни? Па, понекад је помало збуњујуће. Ја бих о њима размишљао као о распореду / позиционирању (они ионако имају бољу подршку за прегледаче), а ово као начин за померање тих ствари као део транзиције или анимације.

Ове вредности би биле било које вредности дужине, попут 10 пиксела или 2,4 ема. Једна вредност ће померити елемент удесно (негативне вредности улево). Ако је дата друга вредност, та друга вредност ће је померити надоле (негативне вредности горе). Или можете добити одређене:

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

Важно је напоменути да елемент који користи transformнеће проузроковати струјање других елемената око њега. Коришћењем translateдоње функције и избацивањем зеленог квадрата из првобитног положаја приметићемо како ће околни текст остати фиксиран на месту, као да је квадрат блок елемент:

Погледајте објашњење Трансформације оловке од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

Такође вреди напоменути да translateће се хардверски убрзати ако желите да анимирате то својство, за разлику од њега position: absolute.

Вишеструке вредности

Помоћу листе одвојене размаком својству можете додати више вредности transform:

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

Вреди напоменути да постоји редослед по којем ће се ове трансформације извршити, у примеру изнад ће се прво извршити `искошење`, а затим ће се елемент скалирати.

Матрик

Функција matrixтрансформације може се користити за комбиновање свих трансформација у једну. То је помало налик скраћеници за трансформисање, само што не верујем да је заиста намењена писању руком. Постоје алати попут Тхе Матрик Ресолутионс, који могу претворити групу трансформација у једну матричну декларацију. Можда у неким ситуацијама ово може смањити величину датотеке, иако такве микро-оптимизације непријатне према ауторима вероватно не вреде вашег времена.

За радознале, ово:

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

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

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

3Д трансформације

Већина горе наведених својстава има 3Д верзије истих.

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

Трећа вредност у translate3dили вредност у translateZпомера елемент према гледаоцу, негативне вредности даље.

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

Трећа вредност у scale3dили вредност у scaleZутиче на скалирање дуж з-осе (нпр. Замишљена линија која излази равно из екрана).

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

rotateXи rotateYротираће елемент у 3Д простору око тих оса. rotate3dомогућава вам да одредите тачку у 3Д простору у којој ћете ротирати елемент око себе.

matrix3d(… )

Начин за програмски опис 3Д трансформације у 4 × 4 мрежи. Нико никада неће написати један од ових, никада.

perspective(value)

Ова вредност не утиче на сам елемент, али утиче на трансформације 3Д трансформација потомствених елемената, омогућавајући им да сви имају конзистентну дубинску перспективу.

Више информација

  • МДН документи о трансформацији и употреби.
  • Документација Давида ДеСандра о 3Д трансформацијама
  • Сурфин 'Сафари: 3Д трансформације
  • В3Ц спецификације о ЦСС3 трансформацијама
  • Увод у ЦСС 3Д трансформације

Подршка прегледача

2Д трансформације

Хром Сафари Фирефок Опера ИЕ Андроид иОС
Било који 3.1+ 3.5+ 10.5+ 9+ 4.1+ Најмање 4

3Д трансформације

Хром Сафари Фирефок Опера ИЕ Андроид иОС
10+ 4+ 12+ ниједан 10+ 4.1+ 5+

Префикси добављача

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