CSS function scaleZ

Опис

scaleZ() - це функція трансформації CSS, яка дозволяє масштабувати елемент у тривимірному просторі вздовж осі Z. Це дає змогу змінювати глибину об'єкта, створюючи вражаючі тривимірні ефекти на веб-сторінках.

Функція scaleZ() приймає один числовий аргумент - scaleZ(z), де z - це коефіцієнт масштабування для осі Z. Позитивні значення збільшують глибину елемента, а значення від 0 до 1 зменшують його. Використання від'ємних значень, наприклад scaleZ(-1), призведе до зміншення об'єкта та його відображення в інвертованому вигляді вздовж осі Z.

Приклад використання:

/* Змінимо глибину елемента вздовж осі Z */
.example-element {
  transform: scaleZ(1.5);
}

У даному прикладі елемент з класом "example-element" буде збільшений в 1.5 рази вздовж осі Z, що створить ефект зближення або віддалення об'єкта у тривимірному просторі.

правити

Порада

Використовуйте scaleZ() у поєднанні з іншими функціями трансформації CSS, щоб створювати складні тривимірні ефекти.

автор: Bond правити

Порада

Пам'ятайте, що значення scaleZ() впливають на просторові властивості елементів, тому враховуйте це при використанні функції.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

Цю функцію можна комбінувати з іншими функціями трансформації CSS, такими як scaleX(), scaleY(), rotate(), translate() та іншими, для створення складних ефектів перетворення у тривимірному просторі. Завдяки функції scaleZ() ви можете розширити можливості дизайну вашого веб-сайту, надаючи йому вражаючої глибини та динамічних ефектів.

автор: Bond правити

Нотатка

scaleZ(size) еквівалентно scale3d(1, 1, size).

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

scaleZ(<number|unit|key>);

Функція scaleZ може отримувати 3 значень:

<number>

Безрозмірне числове значення: Наприклад, 2, -0.5, 0.

автор: Bond

правити

<unit>

Наприклад, px, %, em, rem.

автор: Bond

правити

<key>

Інші значення, що приймаються властивістю transform: Наприклад, initial, inherit, unset

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	12	10	4	15	12	10

Підтримка: мобільні переглядачі

Переглядач
	3	18	10	3.2

Приклади

+ запропонувати свій приклад у пісочниці

<div id="description">
  <h2>Приклад 1: масштабування по осі Z</h2>
  <p>Натисканням на кнопку збільшує елемент вздовж осі Z.</p>
</div>

<div id="result">
  <div class="container">
    <button id="scaleButton">Натисніть для масштабування</button>
    <div class="box"></div>
  </div>
</div>

#description {
  background-color: #eee;
  padding: 20px;
  font-family: Arial, sans-serif;
  font-size: 18px;
}

#result {
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 0.3s;
}

#scaleButton {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #ddd;
  border: none;
  cursor: pointer;
  margin-bottom: 35px;
}

#scaleButton:hover {
  background-color: #ccc;
}

#scaleButton:focus + .box {
  transform: perspective(400px) translateZ(100px);
}

<div id="description">
  <h2>Приклад 2: масштабування по осі Z</h2>
  <p>Один з елементів має зменшену глибину, а інший залишається без змін.</p>
</div>

<div id="result">
  <div class="container">
    <div class="box"></div>
    <div class="box transformed"></div>
  </div>
</div>

#description {
  background-color: #eee;
  padding: 20px;
  font-family: Arial, sans-serif;
  font-size: 18px;
}

#result {
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-right: 20px;
}

.transformed {
  transform: perspective(400px) translateZ(-100px);
  background-color: red;
}