layered pyramid (pure CSS 3D)

Go to Source

See the Code
See it Full Page
See Details

Live coded on the 5th of December 2015. Uses `clip-path` on HTML elements, so it won't work in IE/ Edge (you can [vote for support](https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6519995-support-clip-path-property)! so please do if you like this demo!). Tested & works in Firefox & Chrome. Inspired by [this video](http://www.shutterstock.com/video/clip-1866934-stock-footage–layers-pyramid-hierarchy-animation.html). Uses the [Pop is Everything](http://www.colourlovers.com/palette/7315/Pop_Is_Everything) palette.

Explanations for certain things:

* [clipping paths](https://css-tricks.com/cutting-inner-part-element-using-clip-path/)

* 2D/3D shape computations: [article](https://css-tricks.com/how-i-live-coded-my-most-hearted-codepen-demo/) – [talk](https://vimeo.com/98137613)

* [the `calc()` function](http://www.smashingmagazine.com/2015/12/getting-started-css-calc-techniques/)

This Pen uses: Jade, SCSS, JavaScript, and