CSS Poster

Lab notes

The experiment: An interactive image montage using JS, CSS and HTML

1. Follow the link above
2. Move you mouse or tap around
3. Enjoy the tilting and stretching

Dev notes:

Theme 1: build in the browser

1. HTML and CSS rather Photoshop
2. Mask over JPG, CSS to pixel push
3. Screenshot at 1200 x 630px to generate og:image

Theme 2: 3D CSS

1. CSS perspective attribute
2. translateX not used but fun
3. Tryperspective-origin, rotateY and rotateX

Theme 3: JS to set CSS vars

1. Lea Verou showed this years ago 🤩
2. Track mouseover with JS
3. Update a CSS custom-property
4. Write values 0-1 for simplicity
5. calc() to convert as needed

Further details

The code is here

The demo is here.

Enjoy!