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; )