Деякі секрети CSS3: Transforms

Сьогодні багато хто з вас чув про CSS3, але дехто й досі не розуміє, в чому його особливість. Після кількох експериментів над дизайном сайтів, я вирішив написати для читачів цю серію статтей, в яких поділюся деякими прийомами. Скористатися ними буде нескладно, не потрібно навіть великих знань. Все працює в останніх версіях Opera, Mozilla Firefox, Safari і Chrome. Єдині браузери, які не підтримують цю технологію – це Internet Explorer (хоча в IE 9 обіцяли підтримку деяких елементів, але я його не тестував, тож стверджувати не буду). Для кожного браузера треба прописати свій рядок: -moz- для Mozilla, -webkit- для Safari і -o- для Opera.

Сьогодні розглянемо, як трансформувати елементи.

CSS3 Transform – Rotate

[css].my_CSS3_class {
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
}[/css]

За допомогою цієї трансформації ми повернули картинку вправо. Якщо не вірите, то ось вихідна картинка. Такого ж ефекту можна досягати із текстом чи цілим елементом сторінки.

CSS3 Transform – Skew

[css].my_CSS3_class {
-moz-transform: skew(-25deg);
-webkit-transform: skew(-25deg);
-o-transform: skew(-25deg);
}[/css]

Дозволяє нахилити картинку.

CSS3 Transform – Scale

[css].my_CSS3_class {
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
-o-transform: scale(0.5);
}[/css]

За допомогою цього можна масштабувати картинку. Наприклад, щоб зменшити вдвічі (див. вище), необхідно прописати значення 0.5, щоб збільшити – 2.

Далі буде: CSS3: Border Radius і CSS3: Border Color

© Не Кіт