scale3d() в CSS — масштаб по трьох осях у transform
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Використовуйте
автор: Bondscale3d()з розсудливістю, оскільки зміна масштабу у трьох вимірах може впливати на спотворення пропорцій та зовнішній вигляд елементів. - Порада
-
Експериментуйте з різними значеннями для
автор: BondX,YтаZ, щоб створити цікаві 3D-ефекти та перетворення. - Порада
-
Зверніть увагу на дотримання пропорцій, особливо якщо використовуєте різні значення для трьох вимірів, щоб уникнути спотворення контенту.
автор: Bond - Нотатка
-
Ця функція також може поєднуватись з іншими значеннями
автор: Bondtransform, такими якtranslate3d(),rotate3d()абоperspective(), щоб створити складні 3D-ефекти та анімації, які нададуть вашим веб-елементам вражаючого вигляду та динамічності. Використовуйте функціюscale3d(), щоб вивести свої веб-проекти на новий рівень та захопити увагу своїх користувачів.
Синтаксис
scale3d(<number>, <number>, <number>);Функція scale3d може отримувати єдине значення:
-
<number> -
Числове значення, яке вказує масштаб для відповідного виміру. Позитивні значення збільшують розмір, негативні значення зменшують, а нуль залишає елемент без змін у відповідному вимірі.
автор: Bond
| Значення без задання: | none |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 12 | 10 | 4 | 15 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 3 | 18 | 10 | 3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
При наведенні курсору на блок .box, він змінює свій масштаб у трьох вимірах (X, Y, Z) за допомогою transform: scale3d(1.5, 1.4, 0.5).
HTML
<div id="description">
<h2>Приклад 1</h2>
<p>Наведіть курсор на елемент, щоб побачити зміну масштабу.</p>
</div>
<div id="result">
<div class="box"></div>
</div>CSS
#description {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
transition: transform 0.3s ease;
}
.box:hover {
transform: scale3d(1.5, 1.4, 0.5);
}Два елементи .box, проте другий має клас .scaled, що використовує transform: scale3d(1.5, 1, 0.5) для зміни масштабу у трьох вимірах та змінює колір на червоний.
HTML
<div id="description">
<h2>Приклад 2</h2>
<p>Один з елементів має змінений масштаб.</p>
</div>
<div id="result">
<div class="box"></div>
<div class="box scaled"></div>
</div>CSS
#description {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: space-around;
align-items: center;
height: 300px;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
margin-right: 20px;
}
.box.scaled {
transform: scale3d(1.5, 1, 0.5);
background-color: red;
}Верхній ряд — те, що видно завжди: множники по X і Y. Нижче — сцена з perspective: 300px, де картки доводять поведінку третього аргументу: сам по собі scale3d(1, 1, 3) не змінює нічого, у парі з translateZ(50px) — збільшує втричі саме глибину, а за проміжною обгорткою без preserve-3d ефект зникає. Останній ряд — дзеркало через від'ємний множник і невалідні записи з двома аргументами та з пікселями.
HTML
<p class="head">Перші два множники — звичайний масштаб по ширині й висоті:</p>
<div class="row">
<div class="pad"><div class="card p0">1, 1, 1</div></div>
<div class="pad"><div class="card p1">2, 1, 1</div></div>
<div class="pad"><div class="card p2">1, 2, 1</div></div>
<div class="pad"><div class="card p3">1.5, 1.5, 1</div></div>
</div>
<p class="head">Третій множник у сцені з perspective: 300px:</p>
<div class="row">
<figure>
<div class="scene"><div class="card z0"></div></div>
<figcaption>без перетворення</figcaption>
</figure>
<figure>
<div class="scene"><div class="card z1"></div></div>
<figcaption>scale3d(1, 1, 3) — розмір не змінився</figcaption>
</figure>
<figure>
<div class="scene"><div class="card z2"></div></div>
<figcaption>translateZ(50px) — трохи ближче</figcaption>
</figure>
<figure>
<div class="scene"><div class="card z3"></div></div>
<figcaption>scale3d(1, 1, 3) translateZ(50px) — глибина втричі більша</figcaption>
</figure>
<figure>
<div class="scene"><div class="wrap"><div class="card z3"></div></div></div>
<figcaption>та сама пара крізь обгортку — ефект зник</figcaption>
</figure>
<figure>
<div class="scene"><div class="wrap keep"><div class="card z3"></div></div></div>
<figcaption>обгортка з transform-style: preserve-3d — ефект повернувся</figcaption>
</figure>
</div>
<p class="head">Від'ємний множник дзеркалить, невалідні записи не роблять нічого:</p>
<div class="row">
<div class="pad"><div class="card mir">Дзеркало</div></div>
<div class="pad"><div class="card two">2 аргументи</div></div>
<div class="pad"><div class="card px">2px</div></div>
</div>CSS
.head {
margin: 20px 0 8px;
color: #5a6472;
font-size: .9em;
}
.row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.pad,
.scene {
display: flex;
align-items: center;
justify-content: center;
width: 170px;
height: 130px;
background: #f6f9ff;
border: 1px solid #b9c6d8;
}
.scene {
perspective: 300px;
}
figure {
margin: 0;
width: 170px;
}
figcaption {
margin-top: 6px;
color: #5a6472;
font: 12px/1.35 ui-monospace, monospace;
}
.card {
display: flex;
align-items: center;
justify-content: center;
width: 84px;
height: 44px;
padding: 2px;
background: #2f6fd0;
color: #fff;
font: 600 10px/1.2 ui-monospace, monospace;
text-align: center;
}
.p0 { transform: scale3d(1, 1, 1); }
.p1 { transform: scale3d(2, 1, 1); }
.p2 { transform: scale3d(1, 2, 1); }
.p3 { transform: scale3d(1.5, 1.5, 1); }
.z0 { background: #6c7a8a; }
.z1 { transform: scale3d(1, 1, 3); }
.z2 { transform: translateZ(50px); }
.z3 { transform: scale3d(1, 1, 3) translateZ(50px); }
.wrap {
padding: 3px;
border: 1px dashed #d64545;
}
.keep {
transform-style: preserve-3d;
border-color: #3a9a4f;
}
.mir {
transform: scale3d(-1, 1, 1);
background: #3a9a4f;
}
.two {
transform: scale3d(2, 1.5);
background: #d64545;
}
.px {
transform: scale3d(2px, 1, 1);
background: #d64545;
}Коментарі
Коментарів ще немає — будьте першим!