On Dribbble there was a phase where it felt like every shot had it’s perspective altered.

It is really easy to do in Photoshop and Sketch. However, in Sketch the functionality is somewhat limited. You have to move the positions using the mouse and so is difficult to achieve the result that you are looking for.

I created the same functionality in the browser but with fine grain control over the transforms here:

Note

To remove the whitespace in Sketch, select the image after pasting and hit return and the escape.

Plugin?

I had originally planned for this to be a sketch plugin using a webkit view. However, one of the key APIs broke in a recent version change and I rage quit and gave up.

Luckily we can achieve the same results just using CSS transforms! Changing the X, Y and Z rotations e.g.:

transform: rotateY( 45deg );

We want to be able to export the result. The css will only affect the DOM. Trying to save from javascript won’t include the transform.

The way around is to use canvas. However, canvas does not have these nice simple transformations.

The solution is to use a html to canvas library. I used rasterizeHTML which worked well.

Once we are happy with our changes to the image we can export the canvas to png:

saveImg: ->
  data = @el.toDataURL("image/png")
  window.location.href = data

For the user input I used the dat.gui library. Which was simple to setup and looked nice.

Source is here.