CSS3 преходи и трансформации

Автор: I_V_O

Здравейте! В този урок ще направя едно кратко представяне на двете може би най-интересни CSS3 нововъведения – преходи и трансформации. За да извършим един елементарен CSS преход, вече не са нужни големи JavaScript библиотеки като jQuery или script.aculo.us, а само един ред CSS код. Ето как става това:

-webkit-transition: height 2s ease-in-out; /* За webkit браузъри */
-moz-transition: height 2s ease-in-out; /* За Мозила */
-o-transition: height 2s ease-in-out; /* За Опера */
transition: height 2s ease-in-out; /* Уеб стандарт */

Параметрите биват:

• свойство за прехода или ключовата дума all за всички свойства
• продължителност в секунди
• easing – ease, linear, ease-in, ease-out, ease-in-out

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

a {
color: blue;

-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}

a: hover {
color: green;
}

Браузърите, които поддържат CSS преходи ще променят цвета с анимация, а при не CSS3 браузърите промяната ще става по обичайния начин без анимация.

Другото CSS3 свойство, с което ще ви запозная са трансформациите:

-moz-transform: scale(2) rotate(2deg) translate(2px, 2px) skew(2deg, 2deg);/* За Мозила */
-webkit-transform: scale(2) rotate(2deg) translate(2px, 2px) skew(2deg, 2deg);/* За webkit браузъри */
-o-transform: scale(2) rotate(2deg) translate(2px, 2px) skew(2deg, 2deg);/* За Опера */
transform: scale(2) rotate(2deg) translate(2px, 2px) skew(2deg, 2deg);/* Уеб стандарт */

Това свойство ни позволява да трансформираме елементите с познатите ни функции:

• scale – мащаб на елемента: 1 – елемента е без видима промяна, 1+ елемента е по-голям, 0>x<1 – елемента е по-малък
• rotate – завърта елемента на посочените градуси
• translate( x, y ) – премества елемента
• skew ( x, y ) – смачква елемента

Можете да експериментирате с трансформациите, както и да ги анимирате 🙂

Накрая няколко полезни линка:

W3C спецификация на свойствата:
http://www.w3.org/TR/css3-transitions/
http://www.w3.org/TR/css3-2d-transforms/

Инструмент за генериране на CSS3 свойства с максимална поддръжка
http://www.css3maker.com/

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

Един урок специално и само за web-tourist.net Exclamation