Поворот в CSS. Обертання зображень в CSS3

17

Від автора: бачили коли-небудь вебсайт, який засвідчує злегка повернені зображення піктограми? Це простий ефект, надає наліт зорової індивідуальності. Притому, якщо ви не можете досягти цього повороту за допомогою CSS, то працюєте занадто тяжко! Дізнайтеся, як зробити обертання в CSS3 правильно!

Поворот в CSS. Обертання зображень в CSS3Поворот в CSS. Обертання зображень в CSS3

Введення

Галереї зображень з поверненими піктограмами чомусь зустрічаються нечасто, адже це простий прийом створення стилю своєї веб-сторінки. Однак, якщо зробити все правильно, отримання і підтримка цього ефекту може виявитися серйозною трудністю!

Для його побудови ви можете звернутися до створення повернених піктограм в Photoshop е. Однак у довгостроковій перспективі це може виявитися складним. Недоліки створення повернених піктограм таким методом включають:

Постійність кутів: Якщо не всі зображення повернені під одним кутом, втрачається візуальної сталість сторінки. Це означає підтримку PSD кожної окремої піктограми, ретельно поверненою під постійним кутом. Ви можете, наприклад, відкрити PSD і усвідомити, що забули кут обертання своїх піктограм.

Генерація піктограм в CMS: Якщо ви користуєтеся CMS (WordPress), піктограми, швидше за все, створюються автоматично. Застосувавши вищеописаний метод PSD, вам доведеться створювати вручну і вивантажувати у свою CMS кожну піктограму окремо. Крім того, якщо у вас вже є існуючий сайт, але ви хочете застосувати до піктограм ефект повороту, то доведеться створити їх все заново в photoshop’е, а потім знову вивантажити!

Довгострокова керованість: Скажімо, ви зробили всі свої піктограми злегка схибленими, а тепер хочете перебудувати і перепланувати свою галерею. Це означає, що доведеться заново їх все згенерувати. Якщо ви управляли піктограмами в photoshop’е, то значить, доведеться підігнати і заново зберегти кожну окрему піктограму.

Хіба не здорово, якби можна було б уявити це невелике обертання одним рядком коду? Так можна зробити поворот в CSS! Давайте дізнаємося, як.

Поворот в CSS. Обертання зображень в CSS3

Крок 1: Розуміння своєї мети

Короткий огляд того, що ми намагаємося виконати, розкриває наступні кроки:

Створіть зображення-мініатюру в photoshop’е (не повернену)

Вставте піктограму за допомогою тега img

Замаскуйте її відповідно з допомогою CSS (обміркуйте застосування масок photoshop’у)

Поверніть піктограму усередині маски з допомогою CSS3

Поворот в CSS. Обертання зображень в CSS3

Щоб переконатися, що наша галерея нормально деградує, кроки 1-3 будуть виконані за допомогою CSS. Крок 4 (ефект повороту) – з допомогою CSS3.

Крок 2: Визнання розміру піктограми та збільшення кута повороту

Перед створенням піктограм потрібно визначити, наскільки великий кожна з них буде на екрані.

Якщо наші піктограми занадто маленькі, а ми повертаємо їх під занадто великим кутом, то в деяких кутах виявиться порожній простір. Як тут:

Поворот в CSS. Обертання зображень в CSS3

Так, для ретельного заповнення області маски можна зробити висновок, що чим більше повернена піктограма, тим більшою вона повинна бути. У математичних термінах, чим більше кут повороту піктограми, тим більше повинен бути її розмір (і навпаки).

Поворот в CSS. Обертання зображень в CSS3

Пам’ятайте про найважливіше: зображення-піктограма завжди буде більше, ніж маска зображення (розмір піктограми > розмір маски)

Попередження тим, кого відлякує математика

У кроках 3-6 описується математично вирахувати пропорційні розміри маски зображення і піктограми. Гадаю, зовсім немає необхідності в обертанні зображень за допомогою властивості CSS transform. Навпаки, метою є допомогти вам зрозуміти, як правильно визначити розмір елементів, щоб можна було обертати їх на всі 360°. Так гарантується, що у вас не виявиться потворних пустих кутів.

Крок 3: Пропорційне відповідність

Щоб уникнути показу в масці порожнього простору, потрібно визначити ОДНЕ з наступного:

Розмір дійсної піктограми

Розмір маски зображення (видимої частини піктограми)

Так як піктограма маска зображення пропорційно відповідають за розміром, якщо ви встановлюєте розмір одного, то можете вирахувати розмір іншого.

Крок 4: Визначення розмірів

У цьому прикладі ми збираємося спочатку визначити маску свого зображення. Встановивши розмір маски зображення, можна застосувати до розрахунку розміру піктограми трохи математики:

Визначте розмір маски зображення: 180×240 пікселів

Знайдіть довжину сторони по діагоналі

— Застосувати теорему Піфагора ( a2 + b2 = c2 )

— Перша сторона (a) дорівнює 180px

— Друга сторона (b) дорівнює 240px

— Отже, 1802 + 2402 = c2 (довжина по діагоналі)

— 90,000 = c2

— 300 = c (візьміть квадратний корінь кожної із сторін)

— Довжина по діагоналі (c) дорівнює 300

Поворот в CSS. Обертання зображень в CSS3

Довжина по діагоналі – важливе число. Щоб нашу піктограму можна було обертати на всі 360°, її найкоротша сторона повинна дорівнювати самій довгій стороні маски зображення. (Навіть якщо вам це не потрібно, забезпечення повороту на 360° дасть можливість в майбутньому змінювати кут без необхідності зміни розмірів піктограм).

Поворот в CSS. Обертання зображень в CSS3

Крок 5: Розрахунок розміру піктограми

Як бачите, найкоротша сторона піктограми повинна дорівнювати самій довгій стороні маски. Якщо це буде не так, у нас залишаться порожні простору. Пам’ятайте: розмір піктограми пропорційно більше розміру маски зображення.

Поворот в CSS. Обертання зображень в CSS3

Розрахувати розмір піктограми, щоб вона ідеально підійшла, легко, коли ми знаємо вимірювання маски зображення. Просто беремо найбільшу сторону маски (діагональ) і рівняємо за неї саму коротку сторону піктограми.

Найбільша сторона маски (300) дорівнює самій короткій стороні піктограми (x)

Щоб знайти довжину піктограми, скористайтесь пропорційним співвідношенням

— 180 : 300 (висота маски : висота піктограми)

— 240 : y (довжина маски : довжина піктограми)

Щоб вирішити пропорцію, перемножьте хрест-навхрест

— 180y = 72,000

y = 400 (довжина піктограми)

Поворот в CSS. Обертання зображень в CSS3

Тепер розміри маски і піктограми визначені. Ми знаємо, що якщо маска зображення у нас 180x240px, то зображення-піктограма всередині неї повинно бути 300x400px, даючи можливість обертання на 360°.

Відповідне примітка: Так як розміри маски зображення і піктограми пропорційно рівні, ця математика також буде працювати, якщо спочатку встановити розмір піктограми! Для визначення потрібних розмірів ми застосуємо ту ж теорему Піфагора і пропорції.

Крок 6: Нарешті трохи HTML

Тепер, коли відомі всі розміри, давайте створимо повернені піктограми, почавши з базового HTML.

Rotated Thumbnails with CSS3

Rotated Thumbnails with CSS3

Transform Angle:
Update
Number values only

Поворот в CSS. Обертання зображень в CSS3
Поворот в CSS. Обертання зображень в CSS3
Поворот в CSS. Обертання зображень в CSS3
Поворот в CSS. Обертання зображень в CSS3
Поворот в CSS. Обертання зображень в CSS3
Поворот в CSS. Обертання зображень в CSS3
Поворот в CSS. Обертання зображень в CSS3
Поворот в CSS. Обертання зображень в CSS3
Поворот в CSS. Обертання зображень в CSS3

Ця основна розмітка HTML включає наступне:

input – Дасть користувачеві можливість змінювати кут обертання. Крім того, ми встановимо атрибут value так, щоб він дорівнював того ж кількістю, яке ми спочатку встановимо у своєму CSS (в даному випадку 15).

span – Це повідомлення про помилку буде приховано з виду. За допомогою jQuery ми покажемо його, якщо користувач напише в поле вводу що-небудь, крім числа.

img – Це наші піктограми, які можна прив’язати до чого завгодно.

clear:both – Очищає наші плаваючі піктограми

class=mask – Клас маски зображення

Поворот в CSS. Обертання зображень в CSS3

Крок 7: CSS Основні стилі сторінки

Давайте застосуємо до своєї сторінки трохи основних стилів, щоб структурувати і спростити її.

body {
margin:0;
padding:0;
background:#eee;
font-family:Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif;
}
#wrapper {
width:840px;
margin:0 auto;
background:#fff;
border:1px solid #ccc;
padding:25px;
border-top:none;
}
#error_message {
color:red;
display:none;
font-size:.8em;
}

Зверніть увагу, що тут ми приховали своє error_message за замовчуванням, так як пізніше ми перемкнемо її видимість в jQuery.

Додайте трохи ефектів CSS3

Давайте додамо ще кілька деталей, щоб підкреслити свої основні стилі

#wrapper {
border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
box-shadow:0 0 5px #ccc;
-moz-box-shadow:0 0 5px #ccc;
-webkit-box-shadow:0 0 5px #ccc;
}

Поворот в CSS. Обертання зображень в CSS3

Тепер наш контент отцентрирован при наявності гарної розбивки й кількох ефектів CSS3, підсилюють стилі сторінки.

Крок 8: CSS Стилі маски зображення

Давайте застосуємо до своїх піктограм маску зображення. В HTML ми обернули кожну піктограму в тег-прив’язку і призначили йому клас mask, який будемо використовувати у своєму CSS.

.mask {
position:relative;
height:180px;
width:240px;
float:left;
overflow:hidden;
margin:15px;
border:5px solid #f6f6f6;
box-shadow:0 0 1px #000;
-moz-box-shadow:0 0 1px #000;
-webkit-box-shadow:0 0 1px #000;
}

Ось опис застосованих нами властивостей CSS (і чому ми їх використовували):

position:relative – Наші теги img будуть розташовані абсолютно усередині маски зображення

height, width – Раніше ми визначили розміри маски зображення. Саме туди поміщаємо ці вимірювання.

float:left – Дає зображень «плавати» так, щоб ті демонструвалися у вигляді галереї.

overflow:hidden – Як було розраховано раніше, наші піктограми будуть розміром 300x400px. Тим не менш, ми покажемо тільки їх частину (180x240px). Це властивість діє як маска, приховуючи ту частину піктограм, яка тягнеться за розміри 180×240.

margin – Поділяє наші зображення

border, box-shadow – Створює подвійну кордон (в браузерах що підтримують). Властивість border дає нам товсту брудно-білу кордон навколо зображення, тоді як box-shadow – тонку чорну кордон навколо товстої брудно-білою.

Поворот в CSS. Обертання зображень в CSS3

Крок 9: CSS Розміри піктограм

Встановіть розміри піктограм в відповідності з тими, які ми розрахували в Кроці 5.

.mask img {
height:300px;
width:400px;
}

Крок 10: CSS Центрування піктограм

Прямо зараз наші піктограми розміщені відносно (верхнього лівого краю).

Поворот в CSS. Обертання зображень в CSS3

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

Поворот в CSS. Обертання зображень в CSS3

Щоб домогтися цього, застосуємо наступні правила CSS:

.mask img {
position:absolute;
margin-top:-150px; /* половина висоти */
margin-left:-200px; /* половина ширини */
top:50%;
left:50%;
}

Ось опис зробленого нами:

position:absolute Має піктограму абсолютно усередині маски зображення

margin – Ми встановлюємо негативні поля, рівні точно половині висоти і ширини зображення (300×400), потім встановлюємо властивості позиціонування top і left, що переміщує елементи точно в центр.

Поворот в CSS. Обертання зображень в CSS3

Крок 11: CSS Обертання піктограм

Для повороту елементів ми застосуємо властивість CSS3 transform. Так, наш CSS буде включати всі префікси браузерів

.mask img {
-webkit-transform: rotate(15deg);
-moz-transform:rotate(15deg);
-o-transform:rotate(15deg);
-ms-transform:rotate(15deg);
transform:rotate(15deg);
}

CSS тут досить простий. Ми просто поміщаємо кут повороту в дужки, за чим слід «deg».

У цьому прикладі ми використовували в якості значення повороту 15, але можна вставити і інше число. Так як розміри маски і піктограми ретельно прораховані, гарантоване місце для обертання на всі 360°! Позитивне ціле число повертає зображення вправо, негативне – вліво.

Поворот в CSS. Обертання зображень в CSS3

Крок 12: CSS Ефект проведення мишею над зображенням

Додатково ми збираємося додати рядок простого CSS, яка міняє колір кордону, коли користувач проводить мишею над зображенням.

.mask:hover {border-color:#ddd;}

Крок 13: jQuery Динамічна зміна значення повороту

В якості маленького бонусу ми дамо користувачеві можливість вписати в поле вводу значення, що змінює кут повороту CSS. Так, по-перше, давайте додамо jQuery в кінець сторінки прямо перед закриваючим тегом body разом з посиланням на свій власний сценарій:

Крок 14: jQuery Document Ready

Тепер давайте встановимо jQuery, коли документ готовий:

jQuery(document).ready(function($) {
// тут код
});

Крок 15: jQuery Вихідна функція

Ми створюємо функцію для кожного разу, коли по кнопці «update» (оновлення) клацають мишею.

$(‘button’).click(function() {
// тут код
});

Крок 16: jQuery Зберігання поточного значення повороту

Нам потрібно зберігати числове значення CSS поточного кута повороту в змінну.

var rotation_angle_value = $(‘#rotation_amount’).val();

Цей код знаходить id rotation_amount (яке ми призначили input) і отримує його поточне значення. Якщо пам’ятаєте, ми встановили вихідний атрибут value на рівний 15 (такий же, як у коді CSS для кута повороту).

Крок 17: jQuery Застосування функції isNaN()

Нам потрібно зробити введене користувачем значення новим кутом обертання. Однак слід переконатися, що користувач випадково не ввів нечисловое значення. Ось де в справу вступає функція javascript isNaN(). isNaN() розшифровується як «is not a number» («не число»). Ця функція робить саме те, що передбачає її назва: перевіряє, чи не є передане їй значення «не числом».

Тому ми застосуємо функцію isNaN() і передамо їй значення кута обертання (введене користувачем). Якщо воно не є числом, ми покажемо повідомлення про помилку.

//перевірити, чи є введене користувачем значення числом чи ні
if (isNaN(rotation_angle_value)) { //не число
$(‘#error_message’).show();
//інший код тут
}

Крок 18: jQuery Оновлення кута повороту

Якщо введене користувачем значення виявилося не числом, то показано повідомлення про помилку. Тепер застосуємо пропозицію else для тих випадків, коли вони ввели числове значення. Спочатку приховаємо повідомлення про помилку.

else {
$(‘#error_message’).hide();
}

Так як кут повороту безліч разів збережений в нашому CSS (завдяки різним префиксам браузерів), то потрібно оновити ВСІ ці значення з допомогою jQuery. Тому зробимо наступне: збережемо синтаксис значення CSS в змінну (з новим значенням кута). По суті справи, ми пишемо rotate(15deg) і замінюємо значення в ’15’ значенням користувача.

var rotation_angle = ‘rotate(‘ + rotation_angle_value + ‘deg)’;

Поворот в CSS. Обертання зображень в CSS3

Потім створюємо об’єкт CSS з родинними значеннями. Визначаємо кожна з властивостей CSS (префікси браузерів для transform), потім вставляємо значення як тільки що певною нами змінної.

var updated_css = {
‘-webkit-transform’ : rotation_angle,
‘-moz-transform’ : rotation_angle,
‘-o-transform’ : rotation_angle,
‘-ms-transform’ : rotation_angle,
‘transform’ : rotation_angle,
}

Тепер просто передаємо змінну, що зберігає властивості CSS і значення в jQuery і оновлюємо свій CSS!

$(‘.mask img’).css(updated_css);

Крок 19: jQuery Остаточний код jQuery

Ось як виглядає весь наш jQuery:

jQuery(document).ready(function($) {
$(‘button’).click(function() {
//отримаєте значення кута повороту
var rotation_angle_value = $(‘#rotation_amount’).val();
if (isNaN(rotation_angle_value)) { //не число
$(‘#error_message’).show();
}
else { //число
$(‘#error_message’).hide();
//збережіть синтаксис значення CSS і нове значення кута повороту
var rotation_angle = ‘rotate(‘ + rotation_angle_value + ‘deg)’;
//збережіть властивості CSS і значення
var updated_css = {
‘-webkit-transform’ : rotation_angle,
‘-moz-transform’ : rotation_angle,
‘-o-transform’ : rotation_angle,
‘-ms-transform’ : rotation_angle,
‘transform’ : rotation_angle,
}
//оновіть CSS
$(‘.mask img’).css(updated_css);
}
});
});

Висновок статті з поворотів зображень в CSS

Сподіваюся, ви дізналися щось корисне; часто можна уникнути негнучких дизайнів в photoshop’е, застосовуючи прямо в браузері техніки CSS3. Спасибі за увагу, на цьому розповідь про поворотах в CSS3 закінчено!