Sometimes we want to draw web elements onto a perspective photo. There are several articles that teaches you how to do this:

• Augment Photos With CSS3 matrix3d() Transforms
• Computing CSS matrix3d transforms

These articles are from 2015 era. The examples has a lot of custom code, uses jQuery and CoffeeScript.

But it’s 2022, don’t we already have npm package for this? As it turns out, yes. The library in question is projection-3d-2d. However, this library gives you a 3x3 matrix, but we need a 4x4 matrix to use with matrix3d(). The following code can be used to turn the resulting matrix from projection-3d-2d into a 4x4 matrix suitable for use with matrix3d().

// Width and height of your element
const w = 1200
const h = 800
const points3d = [
  [0, 0],
  [w, 0],
  [w, h],
  [0, h],
]

// The target points on the photo to project onto
const points2d = [
  [70, 543],
  [916, 65],
  [1578, 185],
  [1170, 990],
]

// Calculate the matrix
const projectionCalculator = new ProjectionCalculator2d(points3d, points2d)
const m = projectionCalculator.resultMatrix

// Create the parameters for matrix3d
const matrix = [
  ...[m[0][0], m[1][0], 0, m[2][0]],
  ...[m[0][1], m[1][1], 0, m[2][1]],
  ...[0, 0, 1, 0],
  ...[m[0][2], m[1][2], 0, m[2][2]],
]

Make sure to set the transform-origin to top left.

See example: https://stackblitz.com/edit/vitejs-vite-ndobdk?file=src/App.svelte