| title | layout | slug | script | redirect_from | ||||
|---|---|---|---|---|---|---|---|---|
Perspective |
doc |
perspective |
perspective.js |
|
To activate 3D space, an element needs perspective. This can be applied in two ways.
The first technique is with the transform property, with perspective() as a function:
{% highlight css %} transform: perspective(400px); {% endhighlight %}
For example:
{% highlight css %} .panel--red { /* perspective function in transform property */ transform: perspective(400px) rotateY(45deg); } {% endhighlight %}
{% include edit-codepen.html pen_slug="XqMGRB" %}
The second technique is with the perspective property:
{% highlight css %} perspective: 400px; {% endhighlight %}
For example:
{% highlight css %} .scene--blue { /* perspective property */ perspective: 400px; }
.panel--blue { transform: rotateY(45deg); } {% endhighlight %}
{% include edit-codepen.html pen_slug="PepLOz" %}
These two formats both trigger a 3D space and can produce the same visual result. But there is a difference. The functional notation is convenient for directly applying a 3D transform on a single element (in the red example, I use it in conjunction with a rotateY transform). In this way, it is used as a shorthand to transform a single element in 3D.
But when used on multiple elements, the effect breaks. The transformed elements don't line up together. This is because each element has its own perspective, its own vanishing point. To remedy this, use the perspective property on a parent element, so each child may share the same 3D space.
{% 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" %}
The value of perspective determines the intensity of the 3D effect. Think of it as a distance from the viewer to the object. The greater the value, the further the distance, the less intense the visual effect. perspective: 2000px yields a subtle 3D effect, as if we are viewing an object from far away through binoculars. perspective: 100px produces a tremendous 3D effect, like a tiny insect viewing a massive object.
You can also use 3D transforms without perspective, either by setting perspective: none or not setting perspective at all. Without perspective, parallel planes are orthogonal and have no vanishing point.
By default, the vanishing point for a 3D space is positioned at the center. You can change the position of the vanishing point with perspective-origin property.
{% highlight css %}
perspective-origin: 25% 75%;
{% endhighlight %}
perspective
perspective-origin x
perspective-origin y
Spin cube
Backface visible
{% include edit-codepen.html pen_slug="bMqZmr" %}