| title | layout | slug | script | redirect_from | ||||
|---|---|---|---|---|---|---|---|---|
Перспектива |
doc |
perspective |
perspective.js |
|
Чтобы активировать 3D-пространство, элементу необходима перспектива. Это можно сделать двумя способами.
Первая техника — использование свойства transform с функцией perspective():
{% highlight css %} transform: perspective(400px); {% endhighlight %}
Например:
{% highlight css %} .panel--red { /* функция perspective в свойстве transform */ transform: perspective(400px) rotateY(45deg); } {% endhighlight %}
{% include edit-codepen.html pen_slug="XqMGRB" %}
Вторая техника — использование свойства perspective:
{% highlight css %} perspective: 400px; {% endhighlight %}
Например:
{% highlight css %} .scene--blue { /* свойство perspective */ perspective: 400px; }
.panel--blue { transform: rotateY(45deg); } {% endhighlight %}
{% include edit-codepen.html pen_slug="PepLOz" %}
Обе эти техники активируют 3D-пространство и могут дать одинаковый визуальный результат. Однако есть одно отличие. Функциональная нотация удобна для прямого применения 3D-преобразований к отдельному элементу (в красном примере я использую её в сочетании с трансформацией rotateY). Таким образом, это можно использовать как сокращение для 3D-преобразования одного элемента.
Но когда применяется к нескольким элементам, эффект не срабатывает. Преобразованные элементы не выстраиваются друг с другом. Это происходит потому, что у каждого элемента своя перспектива и точка схода. Чтобы этого избежать, применяйте свойство perspective к родительскому элементу, чтобы дочерние элементы могли разделять одно и то же 3D-пространство.
{% highlight css %} .panel--separate { transform: perspective(400px) rotateY(45deg); } {% endhighlight %}
{% include edit-codepen.html pen_slug="WJpmdO" %}
{% highlight css %} .scene--together { perspective: 400px; }
.panel--together { transform: rotateY(45deg); } {% endhighlight %}
{% include edit-codepen.html pen_slug="MGpxVG" %}
Значение свойства perspective определяет интенсивность 3D-эффекта. Представьте это как расстояние между зрителем и объектом. Чем больше значение, тем дальше объект, и тем менее заметным будет эффект. Например, perspective: 2000px даёт лёгкий 3D-эффект, как если бы мы смотрели на объект через бинокль издалека. А вот perspective: 100px создаёт потрясающий эффект, как если бы крошечное насекомое рассматривало гигантский объект.
Также можно использовать 3D-преобразования без перспективы, установив perspective: none или не задавая свойство perspective вообще. Без перспективы параллельные плоскости становятся ортогональными и не имеют точки схода.
По умолчанию точка схода для 3D-пространства расположена в центре. Вы можете изменить положение этой точки с помощью свойства perspective-origin.
{% highlight css %}
perspective-origin: 25% 75%;
{% endhighlight %}
перспектива
точка схода по оси X
точка схода по оси Y
Крутить куб
Видимая задняя грань
{% include edit-codepen.html pen_slug="bMqZmr" %}