# How to achieve "hierarchical perspective"?

**URL:** <https://discourse.threejs.org/t/how-to-achieve-hierarchical-perspective/1547>\
**Category:** Questions\
**Tags:** perspective-camera, perspective, magic\
**Created:** [December 31, 2017, 3:09am UTC](https://discourse.threejs.org/t/how-to-achieve-hierarchical-perspective/1547 "2017-12-31T03:09:25Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [December 31, 2017, 3:09am UTC](https://discourse.threejs.org/t/how-to-achieve-hierarchical-perspective/1547/1 "2017-12-31T03:09:25Z")

</div>

This is rather bizarre, but CSS3D has (for lack of a name) “hierarchical perspective”. For example, see this pen:

https://codepen.io/anon/embed/preview/ZvKRBz?height=300&slug-hash=ZvKRBz&default-tabs=css,result&host=https://codepen.io

In the pen, each div has a perspective of `400` which is relative to each div’s parent perspective! The deeps the div, the more pronounced the distortion.

How might we achieve this sort of perspective in Three.js?

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [December 31, 2017, 3:30am UTC](https://discourse.threejs.org/t/how-to-achieve-hierarchical-perspective/1547/2 "2017-12-31T03:30:22Z")

</div>

What’s really interesting is that all the `div`s still intersect in 3D space!

F.e., here’s one with even more divs:

https://codepen.io/anon/embed/preview/VybBMq?height=300&slug-hash=VybBMq&default-tabs=css,result&host=https://codepen.io