Погледни в CSS3 2D трансформации

Тази статия е част от нашата "Серия уроци на HTML5 / CSS3" - посветен да ви помогне да сте по-добър дизайнер и / или разработчик. Натисни тук за да видите повече статии от същата серия.

Най- Модул за трансформация е огромна добавка в CSS3, отнема начина, по който манипулираме елементи на уебсайт до следващото ниво.

Има някои експерименти, които наистина ме учудват, например такива. Въпреки това, ние няма да изградим нещо като CSS-само икона, която може по някакъв начин да се превърне в Autobot, тъй като тя може да бъде огромна и не е напълно използваема в реалния живот, както и.

Вместо това, този път ще се върнем назад и ще прегледаме основите на CSS3 2D Transformations, за да видим как работи на фундаментално ниво.

Синтаксисът

Модулът CSS3 Transformations ни позволява да трансформираме елемент в определена степен, като превеждането, мащабирането, въртенето и изкривяването.

Официалният синтаксис е Трансформация: метод (стойност). Въпреки това, както и всички други големи 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-ос представлява вертикален линия.

С изключение на ротации. Най- завъртане ще използва полярни координати която е изразена в градуси, които варират от 0 до 360.

Стойностите за всички методи могат да бъдат както отрицателни, така и положителни. Просто вземете бележка, макар че уеб страницата се чете последователно отгоре надолу, което прави оста Y в мрежата обратна на първоначалния принцип на декартовите координати. Това означава, че когато добавите отрицателна стойност към Ордината, вместо това ще се премести на върха.

Използване на трансформациите

Сега, нека видим следната основна демонстрация, за да видим Трансформация в действие.

Превеждам

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

Методът съдържа две стойности; х и Y. на X стойност както посочихме по-горе, елементът ще поеме хоризонтално; наляво или надясно, докато Y стойността ще го отнеме вертикално дъното или отгоре.

Сега, нека да видим няколко прости демонстрации по-долу:

 div ширина: 100px; височина: 100 пиксела; transform: translate (100px, 250px);  

Фрагментът по-горе ще премести елемента за 100px надясно и 250px на дъното.

 div ширина: 100px; височина: 100 пиксела; transform: translate (100px, 0);  

Фрагментът по-горе ще премества елемента точно надясно за 100px, защото нулираме Y-оста. След това, ако искаме да преместим елемента наляво, трябва само да настроим оста Х в отрицателна, както следва:

 div ширина: 100px; височина: 100 пиксела; transform: translate (-100px, 0);  

• Демо "Превод"

Алтернативно, ние можем да преместваме елемента в една посока с тези индивидуални методи; translateX () и translateY (), разликата е, че всеки от тези методи приема само една стойност.

Така че, на практика, transform: translate (-100px, 0) също е равна на transform: translateX (-100px).

II - Мащаб

Най- мащаб метод ни позволява увеличете или намалете елементите от неговия действителен размер. Стойността на скалата е същата като на превеждам Методът по-горе съдържа също X и Y. Единствената разлика е, че не определяме единицата. Ето един пример:

 div ширина: 100px; височина: 100 пиксела; трансформация: мащаб (1.5);  

Горният пример ще увеличи размера на Разделение 1.5 или 150% неговия действителен размер, и тъй като я мащабираме еднакво за двете посоки X и Y, трябва само да я декларираме в една стойност. Можете също така да я декларирате по този начин трансформация: мащаб (1.5, 1.5); ако искате да отидете по-подробно, той ще направи същото.

Освен това, ако искаме да намалим елемента, специално ще използваме стойност от 0.999 до абсолютна 0, като примера по-долу, който ще намали размера на div за 50% или половината:

 div ширина: 100px; височина: 100 пиксела; трансформация: скала (0.5);  

Но внимавайте, ако зададете абсолютна стойност “0” на Разделение просто ще изчезне, така че ако нямате основателна причина да го направите, не бих препоръчал да го направите.

• Демо на скалата

III - Завъртане

Както споменахме по-рано в този пост, въртя метод използва полярни координати, така че стойността е посочена в градуси. Ето два примера

Фрагментът по-долу ще завърти Разделение 30 градуса по посока на часовниковата стрелка.

 div ширина: 100px; височина: 100 пиксела; преобразуване: завъртане (30deg);  

Отрицателната стойност, както е показано в примера по-долу, ще завърти Разделение в обратна посока (обратно на часовниковата стрелка) в същата степен.

 div ширина: 100px; височина: 100 пиксела; transform: завъртане (-30deg);  

• Демо на "Завъртане"

IV - Наклон

Най- кос Методът ни позволява да създадем един вид паралелограма. Той също така съдържа две стойности на осите X и Y. Въпреки това, самата стойност е посочена в степен, вместо линейни измервания, които използваме за мащаб или превеждам метод. Ето един пример:

 div ширина: 200px; височина: 100 пиксела; преобразуване: изкривяване (30deg, 10deg);  

• "Наклон" демо

V - Множествен метод

Най- трансформиране свойството не е ограничено да се справя само с един метод, всъщност можем да включим множество методи в единични декларации, като това:

 div ширина: 100px; височина: 100 пиксела; transform: translateX (100px) завъртане (45deg);  

Горният фрагмент ще премести елемента 100px надясно и в същото време ще се върти на 45 градуса.

Демонстрация "Множество методи".

Transform Origin

Най- transfrom произход - както подсказва името му - се използва за контрол на началната точка на трансформацията. Ако изрично не декларираме това свойство със следния синтаксис начало на преобразуване: X Y;, след това браузърът ще приеме стойността по подразбиране, която е 50% за X и 50% за Y.

Сега, ако определим трансформиране на произход до 0 (X) 0 (Y) трансформацията ще започне в горния ляв ъгъл.

Отново, всички браузъри все още се нуждаят от префикс версията, за да наричат ​​това свойство. Така че, тук е пълната версия, за да се гарантира, че тя работи в повечето текущи браузъри:

 -произход на webkit-transform: X Y; -moz-transform-origin: X Y; -o-transform-произход: X Y; -ms-transform-origin: X Y; начало на преобразуване: X Y; 

• Демо "Transform-origin"

заключение

Ние преминахме през всичките четири основни трансформационни метода; превежда, мащабира, завърта и изкривява

Както вече споменахме обаче, този модул е ​​все още в начален стадий, така че ако използвате тези методи в следващия си уебсайт, уверете се, че той грациозно се намалява за несъвместими браузъри (тук не споменавам IE6).

И накрая, можете да видите цялата демонстрация или да изтеглите източника от следните връзки.

• Демонстрация
• Изтеглете Източник