CSS. Урок 16 Ефекти для hover

1. transform:ефект

Ініціює трансформацію об'єктів. Ці ефекти можуть бути застосовані, наприклад, при наведенні миші на об'єкт (hover). Розглянемо лише деякі цікаві ефекти.

1.1. transform: translate(x,y);

Переміщує елемент на x пікселів праворуч, та на y пікселів вниз. Для зворотнього зсуву треба застосовувати від'ємні значення.

Наприклад:

div:hover {
transform: translate(4px,10px);
}

1.2. transform: rotate(a);

Повертає елемент за часовою стрілкою на а градусів(deg)

Наприклад:

div:hover {
transform: rotate(20deg);
}

1.3. transform: scale(x,y);

Зменшення/збільшення елемента, де x та y - коефіцієнти стискання. Якщо значення x або y менше 1, це означає стискання по відповідних осях. Якщо значення більше 1, це означає збільшення розміру.

Наприклад:

div:hover {
transform: scale(0.5,0.5);
}

2. transition

Перетворення виглядають значно ефектніше, якщо розтягнути їх в часі. Для цього призначено властивість transition.

1-й переметр transition-duration - обов'язковий параметр. Він встановлює час(в секундах) протягом якого відбуватиметься перетворення.

2-й параметр transition-timing-function - це не обовєязковий параметр. може мати такі значення:

  • easy - повільний старт, швидкий перехід, повільне завершення.
  • linear - однакова швидкість переходу від початку до кінця.
  • easy-in - повільний старт
  • easy-out - в кінці уповільнюється
  • easy-in-out - Повільний на початку і в кінці. (відрізняється від easy)

3-й параметр transition-delay є необов'язковим. Він визначає час затримки виконання перетворення.

Як стилізувати уповільнене перетворення

Якщо створювати ефект для елемента при наведенні миші, то в css коді має бути 2 правила. одне правило - стиль елемента, друге стиль для псевдокласа hover цього елемента.

1) до стилів елемента треба додати transition з необхідними параметрами. Наприклад:
div {transition 3s;}

2) до псевдокласу hover необхідно додати саме перетворення. Наприклад:
div:hover {transform: translate(20px,10px);}

Розглянемо приклад з різними 2d трансформаціями протягом 2сек.

file css
.ex1,.ex2,.ex3 {
/* inline-block змушує блок зменшитися до розміру тексту */
display:inline-block;
font-family:verdana;
background-color:Aqua;
font-size:1.5em;
padding:13px;
border:blue 1px solid;
box-shadow: 2px 2px 5px 0px;
/*час перетворення 2сек.*/
transition: 2s;
}
/* зсув при наведенні */
.ex1:hover {
transform: translate(13px,13px);
}
/* поворот при наведенні */
.ex2:hover {
transform: rotate(13deg);
}
/* збільшення при наведенні */
.ex3:hover {
transform: scale(1.2,1.2);
}

file html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<h3>translate </h3>
<div class = ex1> Click me </div>
<h3>rotate </h3>
<div class = ex2> Click me </div>
<h3>scale </h3>
<div class = ex3> Click me </div>
</body>
</html>

Для hover можна застосовувати й інші зміни властивостей елемента. Тінь, круглі кути, розмір, колір, інші 2d трансформації і навіть 3d трансформації.

Виконайте вправу в редакторі html

Створіть блок подібний до зразка. Стилями встановіть перетворення(оберт на 180гр) протягом 1.5 сек. при наведенні миші.