Resources to animate perspective using CSS grid and layers

[cf7hm]

Note: As a novice, I am not familiar with technical terms, so let me know if something is unclear.

Hi All,

To visualise perspective using CSS grid and layers, I found some resources that may be helpful for others too.

I would appreciate your help to add additional resources that may help to create visuals like Josh does on his website. An Interactive Guide to CSS Grid • Josh W. Comeau .

How to:

• toggle to show perspective (tilt? and show the layer(s) “behind”)
• How to automatically show perspective automatically instead of needing to click the toggle.
• Input to change rows and layers (e.g. radio or slider to select nr. of rows and layers toggle)

Concepts and explanations

• CSS grid
• Layers
  • z-index
    • Understanding the z-index: A beginner’s CSS guide
    • What The Heck, z-index?? • Josh W. Comeau

Tutorials

• Tutorial: How to create responsive CSS Grid layouts in Penpot

Examples

• An Interactive Guide to CSS Grid • Josh W. Comeau

Tools

• Navigate webpage layers, z-index, and DOM using the 3D View tool - Microsoft Edge Developer documentation | Microsoft Learn

Thank you.

An Interactive Guide to CSS Grid • Josh W. Comeau