transform-style

Базовое значение Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2022 года.

Свойство transform-style CSS задаёт, будут ли дочерние элементы расположены в трёхмерном пространстве или сплющены в плоскости элемента.

Попробовать

Если элементы сплющены, они не будут существовать самостоятельно в трёхмерном пространстве.

Поскольку это свойство не наследуется, его необходимо задавать для всех нелистовых потомков элемента.

Синтаксис

/* Keyword values */
transform-style: flat;
transform-style: preserve-3d;

/* Global values */
transform-style: inherit;
transform-style: initial;
transform-style: revert;
transform-style: revert-layer;
transform-style: unset;

Значения

flat: Указывает, что дочерние элементы лежат в плоскости самого элемента.
preserve-3d: Указывает, что дочерние элементы должны быть расположены в трёхмерном пространстве.

Описание

Спецификация перечисляет некоторые группирующие значения свойств, которые требуют от пользовательского агента создать сплющенное представление дочерних элементов перед применением, и поэтому вынуждают элемент иметь значение используемого значения transform-style: flat, даже когда preserve-3d указано. К этим значениям свойств относятся:

overflow: любое значение, кроме visible или clip.
opacity: любое значение меньше 1.
filter: любое значение, кроме none.
clip: любое значение, кроме auto.
clip-path: любое значение, кроме none.
isolation: используемое значение isolate.
mask-image: любое значение, кроме none.
mask-border-source: любое значение, кроме none.
mix-blend-mode: любое значение, кроме normal.
contain: paint и любая другая комбинация свойств/значений, которая вызывает сохранение отрисовки. Это включает любые свойства, которые влияют на используемое значение свойства contain, такие как content-visibility: hidden.

Формальное определение

Начальное значение	`flat`
Применяется к	преобразуемым элементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный
Создаёт контекст стекирования	да

Формальный синтаксис

transform-style = 
  flat         |
  preserve-3d

Примеры

Демонстрация стиля преобразования

В этом примере показан 3D куб, созданный с помощью преобразований. Родительский контейнер куба по умолчанию имеет значение transform-style: preserve-3d, поэтому он преобразуется в 3D пространстве, и вы можете видеть его как нужно.

Мы также предоставляем флажок, позволяющий переключаться между этим и transform-style: flat. В этом альтернативном состоянии грани куба сплющены на плоскости своего родителя, и вы можете вообще не увидеть их, в зависимости от используемого браузера.

HTML

<section id="example-element">
  <div class="face front">1</div>
  <div class="face back">2</div>
  <div class="face right">3</div>
  <div class="face left">4</div>
  <div class="face top">5</div>
  <div class="face bottom">6</div>
</section>

<div class="checkbox">
  <label for="preserve"><code>preserve-3d</code></label>
  <input type="checkbox" id="preserve" checked />
</div>

CSS

#example-element {
  margin: 50px;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: rotate3d(1, 1, 1, 30deg);
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: #fff;
}

.front {
  background: rgb(90 90 90 / 70%);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 70%);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 70%);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 70%);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 70%);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 70%);
  transform: rotateX(-90deg) translateZ(50px);
}

JavaScript

const cube = document.getElementById("example-element");
const checkbox = document.getElementById("preserve");

checkbox.addEventListener("change", () => {
  cube.style.transformStyle = checkbox.checked ? "preserve-3d" : "flat";
});

Результат

Спецификации

Спецификация
CSS Transforms Module Level 2 # transform-style-property

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`transform-style`	3612	1212	164910–preview	2315	94	3618	164910	2414	92	3.01.0	4.43

См. также

Использование CSS преобразований

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style