Перспектива
Перспектива
Чтобы активировать 3D-пространство, элементу необходима перспектива. Это можно сделать двумя способами.
Первая техника — использование свойства transform с функцией perspective():
transform: perspective(400px);Например:
.panel--red {
/* функция perspective в свойстве transform */
transform: perspective(400px) rotateY(45deg);
}Вторая техника — использование свойства perspective:
perspective: 400px;Например:
.scene--blue {
/* свойство perspective */
perspective: 400px;
}
.panel--blue {
transform: rotateY(45deg);
}Обе эти техники активируют 3D-пространство и могут дать одинаковый визуальный результат. Однако есть одно отличие. Функциональная нотация удобна для прямого применения 3D-преобразований к отдельному элементу (в красном примере я использую её в сочетании с трансформацией rotateY). Таким образом, это можно использовать как сокращение для 3D-преобразования одного элемента.
Но когда применяется к нескольким элементам, эффект не срабатывает. Преобразованные элементы не выстраиваются друг с другом. Это происходит потому, что у каждого элемента своя перспектива и точка схода. Чтобы этого избежать, применяйте свойство perspective к родительскому элементу, чтобы дочерние элементы могли разделять одно и то же 3D-пространство.
.panel--separate {
transform: perspective(400px) rotateY(45deg);
}.scene--together {
perspective: 400px;
}
.panel--together {
transform: rotateY(45deg);
}Значение свойства perspective определяет интенсивность 3D-эффекта. Представьте это как расстояние между зрителем и объектом. Чем больше значение, тем дальше объект, и тем менее заметным будет эффект. Например, perspective: 2000px даёт лёгкий 3D-эффект, как если бы мы смотрели на объект через бинокль издалека. А вот perspective: 100px создаёт потрясающий эффект, как если бы крошечное насекомое рассматривало гигантский объект.
Также можно использовать 3D-преобразования без перспективы, установив perspective: none или не задавая свойство perspective вообще. Без перспективы параллельные плоскости становятся ортогональными и не имеют точки схода.
По умолчанию точка схода для 3D-пространства расположена в центре. Вы можете изменить положение этой точки с помощью свойства perspective-origin.
perspective-origin: 25% 75%;