CSS scaleX() — масштаб по горизонталі
Опис
scaleX() - це функція трансформації CSS, яка дозволяє створювати ефект масштабування елемента по горизонтальній осі. Застосування цієї функції дозволяє змінювати ширину елемента, збільшуючи або зменшуючи її залежно від значення параметра.
Функція scaleX() приймає один числовий аргумент - scaleX(x), де x вказує масштаб, до якого слід змінити ширину елемента. Значення менше 1 стискає елемент, а значення більше 1 розтягує його. Значення 1 залишить ширину елемента без змін.
Приклад використання:
/* Збільшимо ширину елемента вдвічі */
.example-element {
transform: scaleX(2);
}
У даному прикладі елемент з класом "example-element" буде вдвічі ширшим від початкового стану, створюючи ефект збільшення горизонтальної простору.
Загальний опис
автор: NagarD
- Порада
-
При використанні функції
автор: BondscaleX()слід враховувати відносну ширину батьківського контейнера елемента, оскільки вона може впливати на кінцевий результат. - Порада
-
Використовуйте значення менше
автор: Bond1для стиснення елемента і значення більше1для розтягнення. Значення1залишить ширину елемента без змін. - Порада
-
При використанні функції
автор: BondscaleX()зверніть увагу на можливі впливи на інші властивості елемента, такі як позиціонування або розташування тексту. - Порада
-
Ця функція може бути комбінована з іншими функціями трансформації, такими як
автор: Bondrotate()абоtranslate(), для досягнення більш складних ефектів трансформації. Наприклад, ви можете поєднуватиscaleX()зrotate(), щоб створити ефект обертання елемента під час збільшення або зменшення його ширини. Використовуючи функціюscaleX()разом з іншими можливостями CSS, ви можете створювати захоплюючі та креативні дизайнерські рішення для вашого веб-сайту.
Синтаксис
scaleX(<value>);Функція scaleX може отримувати єдине значення:
-
<number> -
Числове значення, яке представляє масштабування по горизонтальній осі. Значення менше
автор: Bond1зменшує ширину елемента, а значення більше1збільшує ширину елемента.
| Значення без задання: | none |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 3.5 | 3.1 | 10.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 2 | 18 | 4 | 3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі є два прямокутники (box), один з яких має нормальний масштаб (scaleX(1)), а другий зменшений наполовину (scaleX(0.5)) по осі X.
HTML
<div id="description">
<h2>Приклад 2: елементи з різними масштабами по осі X</h2>
<p>Перший прямокутник має нормальний масштаб (1), а другий прямокутник зменшений наполовину (0.5) по осі X.</p>
</div>
<div id="result">
<div class="box"></div>
<div class="box"></div>
</div>CSS
#description {
background-color: #ddd;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.box {
width: 200px;
height: 100px;
margin-right: 20px;
display: inline-block;
}
.box:nth-child(1) {
background-color: #f1c40f;
transform: scaleX(1);
}
.box:nth-child(2) {
background-color: #3498db;
transform: scaleX(0.5);
}У цьому прикладі є прямокутник (#box), який збільшує свою ширину вдвічі (scaleX(2)) після того, як користувач наведе курсор на нього. Це досягається за допомогою CSS-властивості transform та анімації (transition).
HTML
<div id="description">
<h2>Приклад 1: зміна елемента після наведення курсору</h2>
<p>Наведіть курсор на жовтий прямокутник, щоб побачити, як змінюється його ширина.</p>
</div>
<div id="result">
<div id="box"></div>
</div>CSS
#description {
background-color: #ddd;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
#box {
width: 200px;
height: 100px;
background-color: #f1c40f;
transition: transform 0.3s ease;
}
#box:hover {
transform: scaleX(2);
}Верхній ряд — та сама плитка за різних значень: сусідні плитки не зсуваються, бо розкладка про масштаб не знає. Далі — різниця між типовою точкою відліку й transform-origin: left, віддзеркалення через scaleX(-1) і підкреслення, яке при наведенні виїжджає зліва.
HTML
<p class="head">Масштаб не рухає сусідів — рамка показує справжнє місце в потоці:</p>
<div class="row">
<span class="slot"><span class="tile s05">0.5</span></span>
<span class="slot"><span class="tile s1">1</span></span>
<span class="slot"><span class="tile s2">2</span></span>
<span class="slot"><span class="tile s3">-1</span></span>
</div>
<p class="head">Точка відліку: типовий центр проти transform-origin: left</p>
<div class="row col">
<span class="slot"><span class="tile grow">scaleX(2), центр</span></span>
<span class="slot"><span class="tile grow left">scaleX(2), left</span></span>
</div>
<p class="head">Наведіть на перше — підкреслення виїжджає зліва (scaleX від 0 до 1);
друге показує кінцевий стан одразу:</p>
<p>
<a class="link" href="#">наведіть на мене</a>
<a class="link shown" href="#">кінцевий стан, scaleX(1)</a>
</p>
<p class="head">Пастка: scaleX(2px) — оголошення відкинуто цілком:</p>
<div class="row">
<span class="slot"><span class="tile bad">scaleX(2px)</span></span>
</div>CSS
.head {
margin: 18px 0 8px;
color: #5a6472;
font-size: .9em;
}
.row {
display: flex;
gap: 26px;
align-items: center;
}
.row.col {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding-left: 90px;
}
.slot {
display: inline-block;
border: 1px dashed #b9c6d8;
}
.tile {
display: inline-block;
padding: 8px 10px;
background: #2f6fd0;
color: #fff;
font: 600 13px/1 ui-monospace, monospace;
}
.s05 { transform: scaleX(0.5); }
.s1 { transform: scaleX(1); }
.s2 { transform: scaleX(2); }
.s3 { transform: scaleX(-1); }
.grow { transform: scaleX(2); }
.left { transform-origin: left; }
.bad {
transform: scaleX(2px);
background: #d64545;
}
.link {
position: relative;
display: inline-block;
color: #1b4f9c;
text-decoration: none;
font-weight: 600;
}
.link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -3px;
height: 3px;
background: #1b4f9c;
transform: scaleX(0);
transform-origin: left;
transition: transform .3s ease;
}
.link:hover::after,
.link.shown::after {
transform: scaleX(1);
}Коментарі
Коментарів ще немає — будьте першим!