CSS translateY() — зсув елемента по вертикалі
Опис
translateY() - ця функція в CSS використовується для зсуву елемента по вертикалі. Вона дозволяє змінювати положення елемента відносно його вихідної позиції вздовж вертикальної осі.
Приклад використання:
Для зсуву елемента на 100 пікселів вниз, використовуйте такий CSS:
transform: translateY(100px);
Цей код зсуне елемент вниз на 100 пікселів від його початкового положення.
Значення, що вказуються в функції translateY(), можуть бути позитивними або негативними. Позитивне значення зсуває елемент вниз, а негативне - вгору. Наприклад, такий код:
transform: translateY(-50%);
зсуне елемент вгору на 50% від його висоти.
Загальний опис
автор: NagarD
- Порада
-
Позитивне значення зсуває елемент вниз, а негативне - вгору.
автор: Bond - Порада
-
Значення може бути вказане в пікселях (
автор: Bondpx), відсотках (%), відносних одиницях (em,rem) або використовувати ключові слова, такі якtop,bottom,centerі т.д. - Порада
-
Ця функція дозволяє легко контролювати вертикальне положення елементів і може бути корисною для створення ефектів паралаксу, рухомих анімацій та вирівнювання елементів по вертикалі. Ви можете використовувати різні одиниці вимірювання або ключові слова, щоб досягти бажаного зсуву. За допомогою функції
автор: BondtranslateY()можна створювати захоплюючі та динамічні ефекти на вашому веб-сайті.
Синтаксис
transform: translateY(value);Функція translateY може отримувати 3 значень:
-
<length> -
Величина зсуву в пікселях/відсотках/відносних одиницях
автор: Bond -
<word> -
Ключові слова, які визначають положення елемента, наприклад left, right, center і т.д.
автор: Bond -
<number> -
Число без одиниці вимірювання. В початковій системі координат еквівалентно пікселям у батьківському середовищі.
автор: Bond
| Значення без задання: | none |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 3.5 | 3.1 | 10.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 2 | 18 | 4 | 3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей простий приклад демонструє різницю між звичайним блоком і блоком, який використовує функцію translateY().
HTML
<div id="description">
<p>Звичайний блок має синій колір фону та не має зсуву.</p>
<p>Блок з використанням функції <code>translateY()</code> має червоний колір фону та зсувається на 50 пікселів вниз.</p>
</div>
<div class="container">
<div class="block"></div>
<div class="block-translate"></div>
</div>CSS
#description {
font-style: italic;
text-align: center;
line-height: 1.5;
margin-bottom: 50px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #f2f2f2;
}
.block {
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
}
.block-translate {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
transform: translateY(50px);
}
.description {
font-size: 16px;
color: #333;
}Ліворуч і праворуч — однакові блоки з top: 50%. У правого додано translateY(-50%), і він став точно по центру червоної лінії, бо відсоток рахувався від його власної висоти. Нижній ряд показує, що зсув не забирає місця: середній кружок піднято, а проміжок між сусідами лишився той самий.
HTML
<div id="description">
<h2>translateY(): відсоток від власної висоти</h2>
<p>Червона лінія — середина контейнера. top: 50% ставить на неї верхній край, translateY(-50%) — центр елемента.</p>
</div>
<div id="result">
<div class="pair">
<figure>
<div class="stage"><div class="chip only-top">top: 50%</div></div>
<figcaption>тільки top: 50%</figcaption>
</figure>
<figure>
<div class="stage"><div class="chip centered">+ translateY(-50%)</div></div>
<figcaption>top: 50% + translateY(-50%)</figcaption>
</figure>
</div>
<p class="label">Зсув не забирає місця в потоці</p>
<div class="flow">
<span class="dot"></span>
<span class="dot up"></span>
<span class="dot"></span>
</div>
</div>CSS
.pair {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
figure {
margin: 0;
font: 13px/1.4 system-ui, sans-serif;
text-align: center;
}
figcaption {
margin-top: 8px;
color: #495057;
}
.stage {
position: relative;
width: 210px;
height: 170px;
background: #f1f3f5;
border: 1px solid #ced4da;
}
/* Середина контейнера — щоб було видно, куди саме потрапляє блок */
.stage::after {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
border-top: 2px solid #e03131;
}
.chip {
position: absolute;
top: 50%;
left: 20px;
width: 150px;
padding: 14px 8px;
border-radius: 6px;
background: #1864ab;
color: #fff;
}
.centered {
transform: translateY(-50%);
}
.label {
margin: 20px 0 6px;
font-size: 13px;
color: #495057;
}
.flow {
padding: 20px;
background: #f1f3f5;
border: 1px solid #ced4da;
}
.dot {
display: inline-block;
width: 40px;
height: 40px;
margin-right: 10px;
border-radius: 50%;
background: #ced4da;
}
/* display: inline-block обов'язковий — на голому рядковому елементі transform не діє */
.up {
background: #2f9e44;
transform: translateY(-24px);
}HTML
<div id="description">
<p>У цьому коді кожне зображення має власну змінну CSS <strong>--translate-value</strong>, яка визначає значення функції <em>translateY()</em> для кожного зображення.</p>
<p>Просто наведіть курсор на зображення для демонстрації прикладу:</p>
</div>
<div class="container">
<img class="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Sample image" style="--translate-value: -50px;">
<img class="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Sample image" style="--translate-value: 0;">
<img class="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Sample image" style="--translate-value: 30px;">
<img class="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Sample image" style="--translate-value: -20px;">
</div>
<div class="container">
<span class="image-caption">Зсув -50px</span>
<span class="image-caption">Без зсуву</span>
<span class="image-caption">Зсув 30px</span>
<span class="image-caption">Зсув -20px</span>
</div>CSS
#description {
font-style: italic;
text-align: center;
line-height: 1.5;
margin-bottom: 50px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
.container {
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
background-color: #f2f2f2;
}
.image {
width: 100px;
height: 100px;
margin: 10px;
transition: transform 0.5s ease;
position: relative;
}
.image:hover {
transform: translateY(var(--translate-value));
}
.image-caption {
width: 20%;
text-align: center;
font-size: 12px;
color: #888;
margin-top: 15px;
}Коментарі
Коментарів ще немає — будьте першим!