html.okpython.net
Основы создания сайтов
CSS :: Свойство transform-style
css-свойство transform-style (от англ. transform style – стиль трансформации) применяется к родительскому контейнеру и определяет, как дочерние трансформируемые элементы будут отображаться в 3D-пространстве. Свойство должно использоваться совместно с transform.
Характеристики
- Значение по умолчанию: flat.
- Применяется: к трансформируемым элементам.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.transformStyle="value".
Синтаксис
transform-style: flat | preserve-3d
Значения
- flat – будут трансформироваться в плоскости родителя (используется по умолчанию);
- preserve-3d – будут трансформироваться в своем собственном 3D-пространстве.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-transforms-2/#transform-style-property
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/transform-style
Подробно о трансформации элементов в нашем учебнике здесь.
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> /* Оформляем самый внешний div */ .div_out{ width: 600px; height: 900px; margin: auto; padding: 20px; background-color: #DFDFDF; border-radius: 5px; } /* Оформляем родительские div'ы абзацев */ .parent_p{ width: 400px; height: 200px; margin: auto; margin-top: 20px; padding: 20px; background-color: #F3F3F3; border-radius: 5px; transform: perspective(200px) rotateX(0.3rad); } /* Оформляем возможность самостоятельной трансформации дочернего абзаца */ .three_d{ transform-style: preserve-3d; } /* Это общий стиль абзацев */ p{ width: 320px; height: 150px; margin: auto; padding: 20px; background-color: #55aa55; border-radius: 5px; text-align: center; font-weight: bold; color: #F9F9F9; transform: rotateX(-150deg); } </style> </head> <body> <div class="div_out"> <div class="parent_p"> <p> Этот абзац трансформируется в <br> 2D-пространстве своего родителя: <br> transform-style: flat (по умолчанию) </p> </div> <div class="parent_p three_d"> <p> Этот абзац трансформируется в <br> собственном 3D-пространстве: <br> transform-style: preserve-3d </p> </div> <div style="margin-top: 5em"> Итак, у нас имеется обычный общий «div» (темно-серый фон), в котором расположены два других «div», которые подвергаются идентичной трансформации поворота вокруг оси X. Оба этих блока имеют еще и по одному дочернему абзацу, которые мы также пытаемся подвергнуть дополнительной 3D-трансформации поворота вокруг оси X (она лежит в плоскости родительского для текущего абзаца элемента). Однако, если в нижнем блоке мы видим, что абзац дополнительно повернулся (как мы и ожидали), то в верхнем блоке мы поворота не увидели. Вместо этого мы увидели какую-то 2D-трансформацию, получившуюся в результате проецирования точек третьего измерения на плоскость родительского элемента. Это связано с тем, что в нижнем блоке мы активировали для абзаца собственное 3D-пространство при помощи класса three_d. </div> </div> </body> </html>
Пример №1