In this guide I want to share with you some powerful things you can do with CSS and show you an example use-case for Puppeteer by Google (a headless chrome api).

CSS became pretty powerful in recent years when it comes to 3D visualisation. One application of that is turning a flat image into a 3D Object with CSS 3D transformations.

The example above works by splitting an image into 24 strips and using image transformation to rotate each strip accordingly. The 3D transformation is done on-device and is quite performance-intense for the device.

Ideally one could save that rendering as a image thumbnail and cache that image for future reference e.g. for use in an Email that is sent at a later point of time.

This is easily done by snapping a screenshot of that page on your device – but could that be done in a server environment?

It turns out, yes, there is a pretty elegant solution.

Enter Puppeteer by Google

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.

One of the listed examples of Puppeteer (GitHub) is Generate screenshots and PDFs of pages.

Perfect. I fiddled around with the code a bit and got it running over at Try Puppeteer. The library even supports stuff like omitBackground to generate a PNG with transparency.

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({width: 300, height: 800});
await page.goto('http://technicalmarketing.guide/3d/?design=design3');
await page.screenshot({path:
'screenshot.png',omitBackground:true});
await browser.close();

There are plenty of other use cases you might find for Puppeteer, fore example:

• Generate PDFs of invoices that you want to attach to an email.
• Do speed tests of your website in a completely clean environment.
• Automated UI Testing

You can find the code for the 3D CSS cylinder here.