Головні новини
Ви тут: Головна / css / Поворот елементів під будь-яким градусом на CSS3

Поворот елементів під будь-яким градусом на CSS3



Найпростіше рішення для повороту блокових елементів сторінки під будь-яким градусом за допомогою CSS3. У прикладі я використав цей метод стосовно заголовку першого рівня <h1>. Ви ж, запросто можете застосувати поворот до будь-якого іншого блочного елементу (div, blockquote, p, h2, h3, і т.д.). Для того щоб реалізувати поворот на практиці, достатньо в CSS створити окремий клас, наприклад .rotate, прописати в ньому властивість transform з певним видом трансформації (в нашому випадку це rotate) і задати необхідні значення повороту елемента на заданий кут відносно точки трансформації rotate(-9deg);. Також ви можите робити це для логотипів або ж заказать логотип в digital агентстві WebEvolution.ru

Для коректного відображення даного методу в різних браузерах, використовуємо вендорні префікси -webkit-, -moz-, -ms- і -o-. Тим хто не знає поясню: Префікси це приставки, використовувані розробниками (вендорами) браузерів для експериментальних CSS-властивостей.

У підсумку отримуємо наступний набір властивостей:

.rotate {
 -webkit-transform: rotate(-9deg); /* Chrome, Safari 3.1+ */ 
    -moz-transform: rotate(-9deg); /* Firefox 3.5-15 */ 
     -ms-transform: rotate(-9deg); /* IE 9 */ 
      -o-transform: rotate(-9deg); /* Opera 10.50-12.00 */ 
         transform: rotate(-9deg); /* Firefox 16 +, IE 10+, Opera 12.10+ */ 
}

І так, щоб вивести на сторінці, наприклад заголовок під певним градусом, достатньо тегу <h1> привласнити клас class=”rotate”, а далі, «магія» CSS зробить свою справу.

<h1 class="rotate">Ваш заголовок</h1>



Автор Володимир Гривінський



Залишити коментар

Ваша електронна адреса не буде опублікована.

Вгору
UA TOP Bloggers