Что такое свойство перспективы CSS3?

Question

Я искал в Интернете и нашел несколько материалов, но ни один из них не продемонстрировал эту концепцию, по крайней мере, для меня. Например, w3schools говорит, что он определяет, сколько пикселей 3D-элемент помещается из представления. Это настолько абстрактно, чтобы полностью понять. Может ли кто-нибудь сказать мне более ярким, понятным способом? Было бы не лучше, если есть некоторые изображения, чтобы показать эту концепцию.

Answer 1

В 3D-преобразованиях перспектива дает объекту трехмерную точку зрения и пытается отобразить перспективу 3D-объекта с точки зрения конкретного зрителя. Это непросто понять.

Это Safari reference на нем.

A beginning tutorial на нем.

Some examples с использованием перспективы.

Some more examples.

FYI, в будущем я бы предложил игнорировать все поисковые запросы Google, которые поступают из w3schools. Они каким-то образом сумели кооптировать высокий рейтинг поиска в Google с невероятно мелким контентом.

Answer 2

При работе в 3D пространства, мы должны установить перспективе значение, в противном случае анимированные элементы будут выглядеть плоскими. Как? Перспективное свойство CSS дает элементу трехмерное пространство, влияя на расстояние между индексом Z и пользователем. Помните: свойство Perspective не должно применяться к элементу, который будет анимироваться (через переход CSS, преобразование или анимацию), а к родительскому элементу.