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

43

Найпростіше рішення для повороту блочних елементів сторінки під будь-яким градусом з допомогою CSS3. У прикладі я використав цей метод стосовно до заголовка першого рівня

. Ви ж, запросто можете застосувати поворот до будь-якого іншого елементи блоків (div, blockquote, p, h2, h3, та ін).

Поворот блоков на CSS3

Для того щоб реалізувати поворот на практиці, достатньо в CSS створити окремий клас, наприклад .rotate (логічно), прописати в ньому чудова властивість transform з певним видом трансформації ( в нашому випадку це rotate) і задати необхідні значення повороту елемента на заданий кут відносно точки трансформації rotate(-8.5 deg);.

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

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

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

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

І так, щоб вивести на сторінці, наприклад, заголовок під певним градусом, досить тегу

присвоїти клас class=”rotate”, а далі, «магія» CSS зробить свою справу.

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

Ваш Заголовок

На цьому все. А як дуже просто можна оформити текстовий заголовок з допомогою CSS3, ми розглядали в попередній статті.

З повагою, Андрій.

Удачі! Буду дуже вдячний, якщо поділитеся посиланням на запис у своїх соц. мережах: